Question

我在javascript上创建了一个过滤搜索列表，并将我列表中的元素嵌套在3个不同的类别中。

Cuenta NT
在职培训
Manual de procedimientos

该表在查找任何这些术语时非常有效，并可立即检索它们。但是，该列表的目标是增长非常多，我希望表格在鼠标悬停结果时显示与标题上的颜色类似的颜色。

问题在于：

尽管在CSS表格中正确定义了背景颜色属性，但在将鼠标悬停在任何结果上时，我看不到任何颜色显示。

CSS

#myUL li a.1：hover：not（.header）{background-color：＃FCF3CF;}

＆＃13;

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";

        }
    }
}

＆＃13;

* {
  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;
			 }

＆＃13;

<!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>

＆＃13;

Answer 1

首先，类名不能以数字字符开头，因此我将您的类重命名为.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>

Answer 2

不要使用数字作为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>

CSS无法识别悬停颜色集

2 个答案: