为啥 :hover 不适用于指定的类

Posted 2023-03-06

【中文标题】为啥 :hover 不适用于指定的类

【英文标题】：Why :hover does not work for the specified class为什么 :hover 不适用于指定的类

【发布时间】：2014-10-26 13:38:07

【问题描述】：

我有以下html代码：

 <a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>

使用以下 css：

a.deletelink:hover, 
a.deletelink:active  
    background-color: #F00; 
    color:#FF0;


a.deletelink:visited,
a.deletelink:link 
    line-height:5em;
    width: 5em;
    text-align: center;
    margin:2em;
    display: block;
    font-weight: bold;
    color:#F00;
    background-color:#639;
    padding: 0.5em;
    text-decoration: none;

但是当鼠标移到链接上时链接的颜色不会改变。你能猜出这里有什么问题吗？

谢谢

【问题讨论】：

开发者始终会“访问”该链接，因此这些样式会覆盖早期的 :hover 样式。

谢谢大家，按照您的建议更改悬停和链接的顺序解决了问题。

【参考方案1】：

注意:hover必须在:link和:visited伪类之后，否则不会影响元素。

a.deletelink:visited ,a.deletelink:link /* ... */ 
a.deletelink:hover, a.deletelink:active  /* ... */ 

来自MDN page：

此样式可能被任何其他与链接相关的伪类覆盖， 即 :link、:visited 和 :active，出现在后续规则中。

为了给链接设置合适的样式，你需要把:hover 规则在:link 和:visited 规则之后但在:active 规则之前，如 由 LVHA 顺序定义：:link — :visited — :hover — :active。

【参考方案2】：

只需更改悬停行为的顺序：

 a.deletelink:visited ,a.deletelink:linkline-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;
a.deletelink:hover, a.deletelink:active background-color: #F00; color:#FF0;

working demo here

---

:hover必须在:link , :visited之后使用

---

您应该遵循LoVeHAte 公式，其中 L 表示 Link，V 表示 Visited，H 表示 Hover，A 表示 Active。

【参考方案3】：

您必须在:link 和:visited 属性之后使用hover：

a.deletelink:visited,
a.deletelink:link 
    line-height:5em;
    width: 5em;
    text-align: center;
    margin:2em;
    display: block;
    font-weight: bold;
    color:#F00;
    background-color:#639;
    padding: 0.5em;
    text-decoration: none;


a.deletelink:hover, 
a.deletelink:active 
    background-color: #F00; 
    color:#FF0;

【参考方案4】：

a.deletelink:active background-color: #F00; color:#FF0;
a.deletelink:hover  background-color: #F00;color: #FF0;
a.deletelink:visited line-height:5em;width: 5em;text-align: center; margin:2em;display:     block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;
.deletelink line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;

应该为你做的