将 CSS 直接插入 HTML 时，悬停伪类不起作用？

Posted 2023-05-08

【中文标题】将 CSS 直接插入 HTML 时，悬停伪类不起作用？

【英文标题】：Hover pseudo-class not working when inserting CSS directly into HTML?

【发布时间】：2014-06-22 09:37:45

【问题描述】：

由于某种原因，我无法让这个 div 的悬停状态适用于我在 Wordpress 页面中创建的按钮：

<div class="signupbutton" style="font-size: 28px; background-color: #5aaf20; color: white; text-align: center; font-family: 'Oswald', Arial, Helvetica; padding: 25px 50px; box-shadow: 1px 1px 5px #b7b9b5; margin: 0% 30%;">SIGN-UP</div>

<style> 
div.signupbutton:hover background-color: #80f133;
</style>

如果我替换悬停的属性（即到边框），它可以正常工作。什么给了？

【参考方案1】：

这是因为内联样式会覆盖您的 :hover 样式。你可以阅读the spec了解更多关于选择器的特殊性。

更好的separate presentation from content 并在样式表中放置内联样式：

div.signupbutton 
    font-size: 28px;
    background-color: #5aaf20;
    color: white;
    text-align: center;
    font-family: 'Oswald', Arial, Helvetica;
    padding: 25px 50px;
    box-shadow: 1px 1px 5px #b7b9b5;
    margin: 0% 30%;

div.signupbutton:hover 
    background-color: #80f133;

【讨论】：

我开始添加答案，但 Oriol 的表现比我的要好得多，所以我改为 +1 了他的答案。

我是这么认为的。使用 Wordpress 页面最简单的方法是什么？

@naturligt 不确定，因为我没有 Wordpress。但只需在您使用 :hover 规则的地方添加代码即可。

【参考方案2】：

下面的例子可行，但@Oriol 的做法更好。

div.signupbutton:hover background-color: #80f133 !important;

【讨论】：

@naturligt 在您的情况下，您可以使用“！important”，但如果您有一个大型应用程序，您可以使用其他方式...变得更有条理。