CODEWITHSUNDEEP
htmlcsscss-selectors
user31027
user31027

Reputation: 355

CSS :hover works but :active does not

I'm preparing a WordPress theme and can't figure why :active in my CSS doesn't work while :hover is working fine.

HTML:

(...)
<div id="mainMenu">
  <div id="mm_links">
     <a id="mm_1" href="index.php/about-icar/">About ICAR</a><br/>
     <a id="mm_2" href="">News</a><br/>
     <a id="mm_3" href="index.php/for-the-authors/">For the authors</a><br/>
     <a id="mm_4" href="index.php/resources/">Resources</a><br/>
     <a id="mm_5" href="index.php/contact-promotion/">Contact<br/>& promotion</a><br/>
   </div>
   <div id="mm_tail"></div>
</div>
(...)

CSS:

div#mainMenu{
        float: left;                                                  
        width: 140px;
        height: 430px;
        margin-top: 48px;
        background-image: url("img/mainMenu.svg");
        background-size:cover;
        text-align: center;
}

div#mainMenu a{
        font-family: 'Raleway', sans-serif;
        font-size: 10.6pt;
        text-decoration: none;
}

div#mainMenu a:link, div#mainMenu a:visited, div#mainMenu a:active {
        color: #262E5B;
}

div#mainMenu a:hover{
        color: #262E5B;
}

a#mm_1 {
        position: relative;
        display: table-cell;
        top: 21px;
        left: 18px;
        width: 120px;
        height: 35px; 
        vertical-align: middle;
}

a#mm_1:hover, a#mm_1:active {             <-- THIS IS NOT WORKING
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

div#mm_links{
        clear:both;
        height: 430px;
}

div#mm_tail{
        background-color: white;
        border-left: 2px solid #262E5B;
        border-right: 2px solid #262E5B;
        border-bottom: 2px solid #262E5B;
        width: 30px;
        height: 100%;
        clear: both;
        float: right;
}

Upvotes: 2

Views: 1709

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371013

The :hover pseudo-class selects an element when the mouse cursor is right above it.

The :active pseudo-class applies styles when the element is clicked (or activated in another way).

In your code, your :hover and :active styles are identical. 

a#mm_1:hover, a#mm_1:active {
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

You won't notice any difference when hovering or clicking.

However, give each a different style and you'll see the difference:

a#mm_1:hover { background-color: yellow; }

a#mm_1:active { background-color: red; }

DEMO

Upvotes: 1

tomtom
tomtom

Reputation: 642

What are you trying to accomplish? If you remove the :hover and press the link I think you will find that the :active is working just fine. But it doesn't do much good since you are styling it the same as when you hover over it. So basically you are hovering over it and then the background-image shows, then you click the link and the same background-image keeps showing.

a#mm_1:active {        
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

Upvotes: 2

Related Questions