css悬停效果不正常

Question

这是DEMO，

我设置，当我的页脚列表上的hove，它将显示绿色。

它工作正常，但是当将鼠标悬停在列表中时，该时间也会悬停效果正常。

CSS：

.social-bar a:hover span {
    text-decoration: none;
    outline:none;
    color: green; /* Match icon highlight color */
}

何时会看到我的演示，它会有所了解。

Answer 1

试试这个http://jsfiddle.net/u7gjgppu/1/。我已经将显示从块更新为内联块。还添加了<br/>以将锚点带到下一行。

.social-bar a {
    display:inline-block;
}

Answer 2

将display: table更改为.social-bar a { display: table; }

equals

JSfiddle

Answer 3

您的：悬停监听器位于“a”标签上，此“a”标签与其父屏幕（社交栏）一样宽，占用屏幕宽度。

尝试：

.social-bar a span:hover

或仅限制社交栏或“a”标签的宽度。

Answer 4

.social-bar a {
  display: block;
}

上面的CSS代码构成了您的元素block，它占据父div的100%宽度.social-bar

因此，如果您想将其限制为锚标记，并根据其内容设置锚的宽度，只需更改您的hover css，如下所示。

.social-bar a span:hover {
 }