CODEWITHSUNDEEP
cssimagehoversprite
Jam
Jam

Reputation: 3

Controlling hover area and CSS image sprites

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 400x400 pixels and the hover area is 100x100 from the top left corner. As you move into the hover area, the 'new' image to display is 200x200. This appears but then this 'new' 200x200 image becomes active; I can then move anywhere within this new image (to say 150x150) and the hover image is still there even though now I am out of the 100x100 original hover area. Is there any way to restrain this so that the active area is always 100x100 even with the 200x200 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

Upvotes: 0

Views: 4433

Answers (2)

Jen
Jen

Reputation: 584

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.

Upvotes: 2

Fewfre
Fewfre

Reputation: 1509

Well, I have a solution. "Cover up" the part you don't want it to trigger on (ex: with empty divs). By doing this it will no longer be hover over the object.

Example

I think there might be a better way using selectors (like +), but this works.

Upvotes: 0

Related Questions