javascript - CSS not recognizing hover color set -
i created filter search list on javascript , nested elements of list under 3 different categories.
- cuenta nt
- training on job
- manual de procedimientos
the table works great while looking of these terms , retrieves them instantly. however, list intended grow , want table display color similar 1 on headings when mouse hovers results.
the problem this:
despite background-color property defined in css sheet, cannot see color displaying while hovering mouse on of results.
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; < li.length; i++) { = 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 { 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 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 job</th></tr> </table> <li class="2"><a href="#">training on job <p class="invisible"> training on 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>
first of all, class names must not begin numerical character, renamed classes .x1, .x2and .x3. second, use selector #myul li.x1 a:hover on first of hover rules, , similar ones others shown below.
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; < li.length; i++) { = 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 { 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 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 job</th></tr> </table> <li class="x2"><a href="#">training on job <p class="invisible"> training on 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>wiki
Comments
Post a Comment