Question

Using a CSS image sprite, I’m creating an ‘interactive’ image where hovering over certain areas changes part of the image. All works fine but struggling with being able to control the area of the hover once you are over the hover area.

For example, lets say the main area is 400×400 pixels and the hover area is 100×100 from the top left corner. As you move into the hover area, the ‘new’ image to display is 200×200. This appears but then this ‘new’ 200×200 image becomes active; I can then move anywhere within this new image (to say 150×150) and the hover image is still there even though now I am out of the 100×100 original hover area. Is there any way to restrain this so that the active area is always 100×100 even with the 200×200 hovered image displayed?

My (cut-down) CSS (areaTest.css) is:

#bigArea {
    width: 400px;
    height: 400px;
    background: url(areaImage.jpg) no-repeat;
    margin: 10px auto; padding: 0;
    position: relative;
}

#bigArea li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}
#bigArea a {
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}

#littleArea {
    width: 100px;
    height: 100px;
}
#littleArea a {
    width: 100px;
    height: 100px;
}
#littleArea a:hover {
    width: 200px;
    height: 200px;
    background: url(areaImage.jpg) 0px -410px no-repeat;
}

and my HTML is:

<link href="areaTest.css" rel="stylesheet" type="text/css">
<div>
    <ul id="bigArea">
        <li id="littleArea"><a href="#"></a></li>
    </ul>
</div>

Any help would be much appreciated.

Thanks, Jam

Answer 1

I forked Kyomu’s solution and applied the opposite: http://jsfiddle.net/FEkcx/

The <a> is an empty block that is on top of a <div> that actually has the background image. The hover is triggered using #littleArea a:hover + div.