Html css悬停效果无法正常工作

这里是

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

它工作得很好，但当悬停在列表外时，悬停效果也在工作

CSS:

---

当我看到我的演示时，它会有想法。

将

显示：块

更改为

显示：表

.social-bar a {
  display: table;
}

---

您的：悬停侦听器位于“a”标记上，此“a”标记的宽度与占据屏幕宽度的父级（社交栏）的宽度相同

尝试：

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

试试这个。我已将显示从块更新为内联块。还添加了

，以将锚定带到下一行

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

上面的CSS代码使您的元素

阻塞

，并占据父div的

100%

宽度，即

。社交栏

因此，如果您想将其限制为单独的锚标记，并根据其内部内容设置锚的宽度，只需更改

悬停

css，如下所示

.social-bar a span:hover {
 }

---

什么意思？只有当我通过链接时，它才会变成绿色。如果我搬出去，它就消失了。你说从列表中消失是什么意思？

.social bar a{display:block；}

此代码使锚（

a

）占据整个宽度。@CagatayUlubay:当鼠标悬停在离该图标一定距离时，这一次它也显示绿色，对吗？你使用的是什么浏览器？它类似于块，但它适用于你的解决方案。

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

.social-bar a {
  display: block;
}

.social-bar a span:hover {
 }