Why :hover does not work for the specified class

问题

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

回答1:

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.

回答2:

Just change the order of hover behaviour:

 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 must be used after :link , :visited

You should follow the LoVeHAte formula where L denotes Link, V denotes Visited, H denotes Hover and A denotes Active.

回答3:

You have to use hover after :link and :visited properties :

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

that should do it for you

来源：https://stackoverflow.com/questions/25620839/why-hover-does-not-work-for-the-specified-class

标签

html

css

hyperlink

hover