Danny Danny - 23 days ago 9
CSS Question

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

I'd appreciate if you could help me with my problem. I'm trying to apply css just to one element, that my mouse is over.

<header>
<ul>
<li><a href="#">ShareImage</a></li>
<li><a href="#">ShareCode</a></li>
</ul>
</header>


That's how the menu looks like. And I want to turn the background of li element brighter when you put cursor over it.

I tried something like this

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


But it doesn't work how I want it to work, I haven't used jQuery for a while and now I forgot everything. Thanks everybody for helping me!

Answer

In your CSS:

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

No need for jQuery.

EDIT:

For the fading effect requested in the comments, this is the simplest CSS (fading of 1 second in this example):

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

EDIT 2:

As experienced, defining the transition property for li:hover breaks the fade in/out effect. You need to define it for the element without the pseudoclass. So, our final CSS code would be:

header ul li {
    transition: 1s;
}

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