CSS не распознает парящий цвет

Question

CSS не распознает парящий цвет

1

Я создал список поиска фильтра на javascript и вложил элементы моего списка в 3 разных категории.

Cuenta NT
Обучение на рабочем месте
Руководство по процедурам

Стол отлично работает при поиске любого из этих условий и мгновенно извлекает их. Тем не менее, список предназначен для того, чтобы расти очень сильно, и я хочу, чтобы таблица отображала цвет, подобный таковому в заголовках, когда мышь зависает с результатами.

Проблема заключается в следующем:

Несмотря на то, что свойство background-color было правильно определено в листе CSS, я не вижу никакого отображения цвета при наведении мыши на любой из результатов.

CSS

#myUL li a.1: hover: not (.header) {background-color: # FCF3CF;}

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
	li = ul.getElementsByTagName("li");
	
	for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color:#f6f6f6;
  display: block;
}

#myUL li a.1:hover:not(.header) {
  background-color: #FCF3CF;
}

#myUL li a.2:hover:not(.header) {
  background-color: #D5F5E3;
}

#myUL li a.3:hover:not(.header) {
  background-color: #D6EAF8;
}

#myTable1 {
	background-color: #F9E79F;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.com {
	background-color: #F9E79F;
}

#myTable2 {
	background-color: #76D7C4;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.toj {
	background-color: #76D7C4;
}

#myTable3 {
	background-color: #85C1E9;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable3 th.doc {
	background-color: #85C1E9;
}




p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.5px;
			 text-align:center;
			 }

<!DOCTYPE html>
<html>

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h2>Matriz de Búsqueda Global</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">


<ul id="myUL">
  
	<table id="myTable1">
	<tr><th class="com">Cuenta NT</th></tr>
	</table>

	  <li class="1"><a href="#">Cuenta NT
	  <p class="invisible">
	  Cuenta NT
	  </p></a></li>


	  
  
	<table id="myTable2">
	<tr><th class="toj">Training on the Job</th></tr>
	</table>

	  <li class="2"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>



  
	<table id="myTable3">
	<tr><th class="doc">Manual de procedimientos</th></tr>
	</table>

	  <li class="3"><a href="#">Manual de procedimientos
	  <p class="invisible">
	  Manual de procedimientos
	  </p></a></li>

</ul>

</body>
</html>

T100 05 сен. 2017, в 00:45

Источник

0

Я не понимаю, в чем именно проблема. Добавьте полное описание того, что делать со своим фрагментом (что писать), что происходит, что это неправильно и что вы хотите получить ...
Dekel 04 сен. 2017, в 22:10
0

Я бы посоветовал против таблиц здесь. Хотя мне нравится понятие, что отображаемые данные таблицы не предназначены для более сложных наборов данных, подобных этим, с несколькими заголовками внутри. A11y будет трудно прочитать это. Вместо этого попробуйте div с соответствующими заголовками?
Dominik 04 сен. 2017, в 22:12
0

Он предназначен для небольшого стола для отдела кадров. Ничего особенного, что-то, что они хотели заменить таблицу Excel
T100 04 сен. 2017, в 22:17

Показать ещё 1 комментарий

Теги:

javascript

html5

css3

2 ответа

1

Не используйте числа в качестве имени для html-классов, это бесполезно со значением "классов" и вашего CSS. Я изменил 1,2,3 на child1, child2, child3 И я изменил их css. Важно установить, что стиль применяется (поэтому он не перезаписывается).

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
	li = ul.getElementsByTagName("li");
	
	for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color:#f6f6f6;
  display: block;
}

#myUL li.child1 > a:hover:not(.header) {
  background-color: #FCF3CF !important;
}

#myUL li.child2 > a:hover:not(.header) {
  background-color: #D5F5E3 !important;
}

#myUL li.child3 > a:hover:not(.header) {
  background-color: #D6EAF8 !important;
}

#myTable1 {
	background-color: #F9E79F;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.com {
	background-color: #F9E79F;
}

#myTable2 {
	background-color: #76D7C4;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.toj {
	background-color: #76D7C4;
}

#myTable3 {
	background-color: #85C1E9;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable3 th.doc {
	background-color: #85C1E9;
}




p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.5px;
			 text-align:center;
			 }

<!DOCTYPE html>
<html>

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h2>Matriz de Búsqueda Global</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">


<ul id="myUL">
  
	<table id="myTable1">
	<tr><th class="com">Cuenta NT</th></tr>
	</table>

	  <li class="child1"><a href="#">Cuenta NT
	  <p class="invisible">
	  Cuenta NT
	  </p></a></li>


	  
  
	<table id="myTable2">
	<tr><th class="toj">Training on the Job</th></tr>
	</table>

	  <li class="child2"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>



  
	<table id="myTable3">
	<tr><th class="doc">Manual de procedimientos</th></tr>
	</table>

	  <li class="child3"><a href="#">Manual de procedimientos
	  <p class="invisible">
	  Manual de procedimientos
	  </p></a></li>

</ul>

</body>
</html>

MarioE 04 сен. 2017, в 22:01

0

Привет Марио. Большое спасибо за ваш ответ. Я только что заметил, что вы сначала ответили на мой вопрос, поэтому я подумал, что должен вас поддержать. Я не очень опытный в стеке потока Есть ли способ, которым я могу способствовать повышению вашей репутации на сайте? Дайте мне знать, спасибо.
T100 05 сен. 2017, в 00:12
0

@ T100 Не беспокойся, я рад, что мы тебе помогли !.
MarioE 05 сен. 2017, в 00:16
0

Вы, конечно, сделали. Хорошего вам человека!
T100 05 сен. 2017, в 00:17

Показать ещё 1 комментарий

Ещё вопросы

Я не понимаю, в чем именно проблема. Добавьте полное описание того, что делать со своим фрагментом (что писать), что происходит, что это неправильно и что вы хотите получить ...
Я бы посоветовал против таблиц здесь. Хотя мне нравится понятие, что отображаемые данные таблицы не предназначены для более сложных наборов данных, подобных этим, с несколькими заголовками внутри. A11y будет трудно прочитать это. Вместо этого попробуйте div с соответствующими заголовками?
Он предназначен для небольшого стола для отдела кадров. Ничего особенного, что-то, что они хотели заменить таблицу Excel
Привет Марио. Большое спасибо за ваш ответ. Я только что заметил, что вы сначала ответили на мой вопрос, поэтому я подумал, что должен вас поддержать. Я не очень опытный в стеке потока Есть ли способ, которым я могу способствовать повышению вашей репутации на сайте? Дайте мне знать, спасибо.
@ T100 Не беспокойся, я рад, что мы тебе помогли !.
Вы, конечно, сделали. Хорошего вам человека!

Johannes · Accepted Answer · 2017-09-04T21-12-00.000Z

Прежде всего, имена классов не должны начинаться с числового символа, поэтому я переименовал ваши классы в .x1, .x2 и .x3. Во-вторых, используйте этот селектор #myUL li.x1 a:hover на первое из правил наведения и аналогичные для остальных, как показано ниже.

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
	li = ul.getElementsByTagName("li");
	
	for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color:#f6f6f6;
  display: block;
}

#myUL li.x1 a:hover {
  background-color: #FCF3CF;
}

#myUL li.x2 a:hover {
  background-color: #D5F5E3;
}

#myUL li.x3 a:hover {
  background-color: #D6EAF8;
}

#myTable1 {
	background-color: #F9E79F;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.com {
	background-color: #F9E79F;
}

#myTable2 {
	background-color: #76D7C4;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.toj {
	background-color: #76D7C4;
}

#myTable3 {
	background-color: #85C1E9;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable3 th.doc {
	background-color: #85C1E9;
}




p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.5px;
			 text-align:center;
			 }

<!DOCTYPE html>
<html>

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h2>Matriz de Búsqueda Global</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">


<ul id="myUL">
  
	<table id="myTable1">
	<tr><th class="com">Cuenta NT</th></tr>
	</table>

	  <li class="x1"><a href="#">Cuenta NT
	  <p class="invisible">
	  Cuenta NT
	  </p></a></li>


	  
  
	<table id="myTable2">
	<tr><th class="toj">Training on the Job</th></tr>
	</table>

	  <li class="x2"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>



  
	<table id="myTable3">
	<tr><th class="doc">Manual de procedimientos</th></tr>
	</table>

	  <li class="x3"><a href="#">Manual de procedimientos
	  <p class="invisible">
	  Manual de procedimientos
	  </p></a></li>

</ul>

</body>
</html>

Эй, спасибо за совет. Я знал, что с именами классов что-то не так, но не мог сказать, что именно. U спас мой братан $% $,