Question

I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven’t been able to find a problem quite like mine.

What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)

What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.

What I have done:

1) Gone from a sprite to just one clear image.

2) Created a new ‘foggy-img’ div container, placed it on top of the image, white with opacity: 0.15

3) Created a new div ‘img-text’ container for the text to put it outside the ‘foggy-img’ so the opacity doesn’t effect it and have got it nicely place where it should be.

The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes ‘foggy’ again.

Is there any way to keep the ‘foggy-box’ clear when hovering over the text which is in a separate div?

The HTML:

 <div id="photo-feature">
    <a href="services.html">
        <div id="img">
            <div id="photo-fog"></div>
            <div id="photo-text"><h3>Learn More...</h3></div> 
        </div>
    </a>
</div>

The CSS:

#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }

#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }

#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }

Answer 1

You could use adjacent siblings selector.
(further details)
It doesn’t work in older browsers though (guess which).

You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:

#photo-text:hover + #photo-fog { // Do something

Right now you’d not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.

Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/

Hope that helps 🙂