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