为什么 :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 样式。
谢谢大家，按照您的建议更改悬停和链接的顺序解决了问题。

标签： html css hyperlink 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: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;}

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;}

应该为你做的

【讨论】：