将鼠标悬停在一个列表项上也会影响每个列表项

Question

在尝试制作社交栏side-menu时，我添加了一个悬停效果，如果悬停该列表项会弹出到左侧。但是由于某种原因，当悬停任何列表项时，其他所有项也会弹出。我在寻找解决方案，但可悲的是找不到该问题的答案。

Codepen

Answer 1

您有2个解决方案：

1. 为链接而不是li项目应用悬停属性。
2. 为li宽度和左边距构建一个css类，并在li项悬停后使用jQuery加载它。

我做了一个快速的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;
}