css 悬停不起作用

Question

你能看看我的代码吗，请告诉我为什么悬停不起作用，谢谢!

<style>
 #moreDiscussHome:hover{
           background-color: #ffffff;
}

</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>

Answer 1

好吧，一旦应用了 display: none;，您就不再悬停该元素，因为它不存在，所以它基本上会不断闪烁或什么都不做。

也许试试不透明度*:

#moreDiscussHome:hover {
    opcaity: 0;
}

请注意，该元素仍然保留它在布局中的空间，这可能不是您想要的...但老实说，我不确定您要通过此实现什么。

旁注:没有理由不将其他内联样式移动到样式表中。

This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }

编辑:我强烈建议您将所有内联样式移动到一个 CSS 文件中。如果没有其他原因，为了避免您在尝试应用背景颜色时似乎已经遇到的一些问题。捷径在当时似乎更容易，但俗话说:"Shortcuts make for long delays" . (换句话说，不要这样做)

_{* visibility:hidden 将响应 :hover 与 display:none 相同，因此它也不起作用.感谢 thirddot 的提示。}