1
我在javascript上创建了一个过滤器搜索列表，并将列表中的元素嵌套在3个不同的类别下。CSS不识别悬停颜色集
- CUENTA NT
- 培训在工作中
- 手册德procedimientos
表的伟大工程，同时寻找任何条款，并立即检索它们。但是，该列表的目的是增长很多，我希望表格在鼠标悬停结果时显示与标题上的颜色类似的颜色。
问题是这样的：
尽管background-color属性在CSS片被正确地限定，也看不出任何颜色，而将鼠标上的任何结果的显示。
CSS
#myUL李A.1：悬停：没有（.header）{背景颜色：＃FCF3CF;}
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
\t li = ul.getElementsByTagName("li");
\t
\t 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 {
\t background-color: #F9E79F;
\t border: 1px solid #ddd;
\t width:100%;
\t height:50px;
\t padding-left:10px;
\t text-align:left;
\t text-transform:uppercase;
}
#myTable th.com {
\t background-color: #F9E79F;
}
#myTable2 {
\t background-color: #76D7C4;
\t border: 1px solid #ddd;
\t width:100%;
\t height:50px;
\t padding-left:10px;
\t text-align:left;
\t text-transform:uppercase;
}
#myTable th.toj {
\t background-color: #76D7C4;
}
#myTable3 {
\t background-color: #85C1E9;
\t border: 1px solid #ddd;
\t width:100%;
\t height:50px;
\t padding-left:10px;
\t text-align:left;
\t text-transform:uppercase;
}
#myTable3 th.doc {
\t background-color: #85C1E9;
}
p.invisible {visibility:hidden;
\t \t \t display:inline;
\t \t \t font-size:0.5px;
\t \t \t text-align:center;
\t \t \t }<!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">
\t <table id="myTable1">
\t <tr><th class="com">Cuenta NT</th></tr>
\t </table>
\t <li class="1"><a href="#">Cuenta NT
\t <p class="invisible">
\t Cuenta NT
\t </p></a></li>
\t
\t <table id="myTable2">
\t <tr><th class="toj">Training on the Job</th></tr>
\t </table>
\t <li class="2"><a href="#">Training on the Job
\t <p class="invisible">
\t Training on the Job
\t </p></a></li>
\t <table id="myTable3">
\t <tr><th class="doc">Manual de procedimientos</th></tr>
\t </table>
\t <li class="3"><a href="#">Manual de procedimientos
\t <p class="invisible">
\t Manual de procedimientos
\t </p></a></li>
</ul>
</body>
</html>
我不明白究竟是什么的问题。添加一个关于如何处理你的代码片段（写什么）的完整说明，发生了什么，它是错误的，你想要得到什么... – Dekel
我在这里建议反对表。虽然我喜欢这个概念，但是数据显示的表格并不适用于像这样的更复杂的数据集，其中包含多个标题。 A11y将很难读到这一点。请尝试使用适当标题的div？ – Dominik
它旨在成为人力资源部门的一张小桌子。没有什么奇特的，他们想要取代Excel电子表格 – T100