Question

I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn’t want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?

The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn’t work. So, I must be doing something wrong with the HTML? But I’m just not sure what. Help appreciated! Thanks.

Note: I have the CSS in an external sheet.

div.topIconsHover:hover {
    background-color:#555555;
}

<div class="topIcons topIconsHover">            
    <a href="tools.html"><img src="tools16lg.png" /></a>                
</div>

div.topTextHover:hover {
    background-color:#555555;
    color:#ffffff
}

<div id="topBrowse" class="topTextHover">       
    <a href="browse.html">Browse</a>                    
</div>

Answer 1

The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :

<style type="text/css">
.topTextHover:hover {
    background-color:#555555;
    color:#ffffff
}
</style>

<div id="topBrowse">       
    <a href="browse.html" class="topTextHover">Browse</a>                    
</div>

EDIT :

If you’re looking to define a base class for the link itself, and a HOVER state, do it like this :

<style type="text/css">
.topTextHover {
    background-color: transparent;
    color: #0000ff;
}
.topTextHover:hover {
    background-color: #555555;
    color: #ffffff;
}
</style>

<div id="topBrowse">       
    <a href="browse.html" class="topTextHover">Browse</a>                    
</div>

Good luck