jquery - How to apply css just to element that curser is on? -


i'd appreciate if me problem. i'm trying apply css 1 element, mouse over.

<header>   <ul>     <li><a href="#">shareimage</a></li>     <li><a href="#">sharecode</a></li>   </ul> </header> 

that's how menu looks like. , want turn background of li element brighter when put cursor on it.

i tried this

$(function(){   $('header a').hover(function(){     $(this).fadein(2000, function(){       $('header ul li').css("background-color", "#3a3a3a");     });   }); }) 

but doesn't work how want work, haven't used jquery while , forgot everything. helping me!

in css:

header ul li:hover {     background-color: #3a3a3a; } 

no need jquery.

edit:

for fading effect requested in comments, simplest css (fading of 1 second in example):

header ul li:hover {     background-color: #3a3a3a;     transition: 1s; } 

edit 2:

as experienced, defining transition property li:hover breaks fade in/out effect. need define element without pseudoclass. so, our final css code be:

header ul li {     transition: 1s; }  header ul li:hover {     background-color: #3a3a3a; } 

Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -