html - Why hover is not working in JQuery -


i'm trying follow demo web application somehow don't obtain results get.

i text changes colour when mouse over. here have done until now.

html code looks like:

<body> <div id="menu">         <ul>           <a href="#"><li>aaa</li></a>           <a href="#"><li>bbb</li></a>           <a href="#"><li>ccc</li></a>           <a href="#"><li>ddd</li></a>         </ul> </div> </body> 

my jquery code:

$(function(){         $('li').hover(function(){             $(this).addclass('highlight');         }, function(){             $(this).removeclass('highlight');         });  }); 

my css code:

.highlight{     color:green; } 

any idea?

my fiddle.

the issue because html invalid - a element must inside li:

<ul>     <li><a href="#">aaa</a></li>     <li><a href="#">bbb</a></li>     <li><a href="#">ccc</a></li>     <li><a href="#">ddd</a></li> </ul> 
$('li a').hover(function () {     $(this).addclass('highlight'); }, function () {     $(this).removeclass('highlight'); }); 

working example

note fiddle did not include jquery, , can shorten code using toggleclass():

$('li a').hover(function () {     $(this).toggleclass('highlight'); }); 

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -