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
Post a Comment