原因：悬停不适用于指定的类 [英] Why :hover does not work for the specified class

问题描述

我有以下html代码：

 < a class =deletelinkonclick =return！deleteitem（' delete.php'）href =delete.php>删除项目< / a> 
  

加上以下css：

<$ p $
背景颜色：＃F00;
颜色：＃FF0;
}

a.deletelink：visited，
a.deletelink：link {
line-height：5em;
width：5em;
text-align：center;
保证金：2em;
display：block;
font-weight：bold;
颜色：＃F00;
背景颜色：＃639;
填充：0.5em;
text-decoration：none;
}

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

谢谢

注意：hover 必须出现在：link 和：visited 伪类，否则它不会影响元素。

  a.deletelink：visited，a .deletelink：link {/ * ... * /} 
 a.deletelink：hover，a.deletelink：active {/ * ... * /} 
  pre> 
 
 
从  MDN页面 ： 
 
 
 
 
这种风格可能会被任何其他链接相关的伪 - 类，
即：link，：visited和active，出现在随后的规则中。  
 
 
为了正确设置链接的样式，您需要将：hover  
规则放在：link 和：visited 规则，但在：active 之前，作为由LVHA定义的
：：link   -  ：visited   -  ：hover   -  ：active 。
 
 
 
I have the following html code:
 <a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>
with the following 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;
}
but the color of the link will not change when mouse moves over it. Could you guess what is wrong here?

thanks
解决方案
Note that :hover must come after :link and :visited pseudo classes, otherwise it won't affect the element.
a.deletelink:visited ,a.deletelink:link{ /* ... */ }
a.deletelink:hover, a.deletelink:active { /* ... */ }
From MDN page:

  
This style may be overridden by any other link-related pseudo-classes,
  that is :link, :visited, and :active, appearing in subsequent rules.  
  
  
In order to style appropriately links, you need to put the :hover
  rule after the :link and :visited rules but before the :active one, as
  defined by the LVHA-order: :link — :visited — :hover — :active.


                        
这篇关于原因：悬停不适用于指定的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！