Наведение на один элемент списка влияет на каждый элемент списка также

Question

При попытке сделать социальную панель side-menu я добавил эффект наведения, когда при наведении указателя элемент списка появлялся бы слева.Но по какой-то причине при наведении курсора на любой элемент списка появляются все остальные.Я искал решение, но, к сожалению, не нашел ответа на эту проблему.

Codepen

Answer 1

у вас есть 2 решения:

1. Примените свойство hover для ссылки вместо элемента li.
2. Создайте класс css для width & margin-left и используйте jQuery длязагрузите его, как только элемент li будет найден.

Я сделал быструю функцию jQuery:

$('.social-nav-item').hover(function(){

   $(this).addClass("link_hovered");

});

https://codepen.io/anon/pen/QoNXZL

Чистый CSS для элемента li:

.social-nav-item:hover{
  width:200px !important;
  margin-left:-150px;
}