Set a:hover based on class

Question

I have the following HTML:

    home
    

        

                      

              相关标签:
       
      

Answer 1

how about .main-nav-item:hover

this keeps the specificity low

Answer 2

try this

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}

.div a:hover
{
background-color:#080808;
color:white;
}

lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.

Answer 3

Cascading is biting you. Try this:

.menu > .main-nav-item:hover
    {
        color:#DDD;
    }

This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.

Answer 4

Try this:

.menu a.main-nav-item:hover { }

In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.

Basically it boils down to this:

Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.

Answer 5

Set a:hover based on class you can simply try:

a.main-nav-item:hover { }

Answer 6

One common error is leaving a space before the class names. Even if this was the correct syntax:

.menu a:hover .main-nav-item

it never would have worked.

Therefore, you would not write

.menu a .main-nav-item:hover

it would be

.menu a.main-nav-item:hover