Stworzyłem listę wyszukiwania filtrów na JavaScript i zagnieżdżone elementy mojej listy poniżej 3 różnych kategorii.

  • Cuenta NT.
  • Szkolenie na stanowisku pracy
  • Ręczny de procedimientos.

Tabela działa świetnie, szukając jednego z tych warunków i natychmiast ich pobiera. Jednak lista ma się jednak rozwijać i chcę, aby stół wyświetli kolor podobny do jednego na nagłówkach, gdy mysz unosi się na wynikach.

Problem jest taki:

Pomimo właściwości kolorów tła została odpowiednio zdefiniowana w arkuszu CSS, nie widzę żadnego koloru wyświetlania podczas unoszenia myszy na którekolwiek z wyników.

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>
1
T100 5 wrzesień 2017, 01:08

2 odpowiedzi

Najlepsza odpowiedź

Przede wszystkim Nazwy klas nie mogą zaczynać się od znaku numerycznego, więc przemianam na twoje zajęcia do .x1, .x2 i .x3. Po drugie, użyj tego selektora #myUL li.x1 a:hover na pierwszym z reguł uniwersalnych i podobnych dla innych, jak pokazano poniżej.

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>
2
Johannes 4 wrzesień 2017, 23:53

Nie używaj liczb jako nazwy klas HTML, brud się ze znaczeniem "klas" i twoich CSS. Zmieniłem 1,2,3 do dziecka1, dziecko2, dziecko3 i zmieniłem ich CSS,! Ważne jest zapewnienie, że styl ma zastosowanie (dlatego nie otrzymuje się).

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>
1
MarioE 4 wrzesień 2017, 23:36