Как применить css только к элементу, в котором работает curser?

Question

Буду признателен, если вы поможете мне с моей проблемой. Я пытаюсь применить CSS только к одному элементу, что моя мышь закончилась.

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

Так выглядит меню. И я хочу повернуть фон элемента li ярче, когда вы наводите курсор на него.

Я пытался что-то вроде этого

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

Но это не работает, как я хочу работать, я не использовал JQuery на некоторое время, и теперь я все забыл. Спасибо всем за то, что помогли мне!

Answer 1

В вашем CSS:

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

Нет необходимости в JQuery.

EDIT:

Для затухающего эффекта запрошенной в комментариях, это самый простой CSS (угасание 1 секунды в этом примере):

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

EDIT 2:

Как уже было сказано, определение свойства перехода для li:hover приводит к нарушению эффекта выцветания. Вы должны определить его для элемента без псевдокласса. Таким образом, наш окончательный код CSS будет:

header ul li { 
    transition: 1s; 
} 

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

Answer 2

Решение 1

Использование Hover в CSS

Как поместить этот код в заголовке

<STYLE type="text/css"> 
    ul{background-color:#fff;} 
    li:hover 
    { 
     background-color:#ff0000; 
    } 
</STYLE> 

Решение 2

Использование JQuery Функция

$('li').mouseover(function(e) 
{ 
    e.stopPropagation(); 
    $(this).addClass('hover'); 
}); 

$('li').mouseout(function() 
{ 
    $(this).removeClass('hover'); 
}); 

Answer 3

Вот возможное решение:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
    <li><a href="#">ShareImage</a></li> 
 
    <li><a href="#">ShareCode</a></li> 
 
    </ul> 
 
</header>