Question

我有以下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;
}

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

感谢

Answer 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。

Answer 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

：必须在:link , :visited

之后使用悬停

您应该遵循LoVeHAte公式，其中L表示链接，V表示已访问，H表示悬停，A表示活动。

Answer 3

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

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

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

应该为你做的

原因：hover对指定的类不起作用

4 个答案: