CODEWITHSUNDEEP
cssimagehyperlink
Nanowatt
Nanowatt

Reputation: 33

Image links css

So, I have two image links who act like tabs. I photoshoped them so they have an invisible background. How can I change the background of the image selected just like a tab?

I have these codes: 

<div id="menutabs">
    <li><a class="tabbuttons" href="menuinicial.html"><img src="summary.png" alt="" width="70" height="15"></a></li>
    <li><a class="tabbuttons" href="trackit.html"><img src="trackit.png" alt="" width="70" height="15"></a> </li>
    </div>

and the css, which is not working, only the hover one. the active attribute is not working, the color doesn't "lock". Maybe it's because it's an image? Hope you can help me!

#menutabs li{
    display: inline;
}

.tabbuttons:active{
    background: #ccc;
}

.tabbuttons:hover{
    background: #666;
}

Upvotes: 0

Views: 156

Answers (1)

dougajmcdonald
dougajmcdonald

Reputation: 20037

The active state is only triggered when an item is clicked, like a hyperlink/button etc but it is removed when the mouse is released.

In short, the active state doesn't do what you want here.

What you'll want to do it add an 'active' css class to the tab when it's clicked and style that class appropriately with the background image.

Upvotes: 1

Related Questions