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;被应用，你就不再徘徊元素，因为它不在那里，所以它基本上会不断闪烁或什么都不做。

尝试使用opacity *：

#moreDiscussHome:hover {
    opcaity: 0;
}

请注意，元素仍然在布局中保留了它的空间，这可能不是你想要的......但是老实说我不确定你想用这个来实现什么。

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

  

这不起作用：#moreDiscussHome：hover {background-color：#ffffff; }

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

_{* visibility:hidden会像:hover一样回复display:none，因此它也无效。感谢thirtydot提示。}