CSS Rollovers: how to main "hit area" size when hidden image is larger than anchor area

Posted by nukefusion on Stack Overflow See other posts from Stack Overflow or by nukefusion
Published on 2010-06-03T07:09:45Z Indexed on 2010/06/03 7:14 UTC
Read the original article Hit count: 292

Filed under:

I have a small problem and I don't think what I want to do can be achieved with just pure CSS, but I figured I'd ask anyway.

Basically, I have one DIV which contains a hyperlinked element that is smaller in size to it's parent DIV. So in effect I have a square within a square with the inner square being the "hit area". When I mouse over this inner square I want the background of the outer square to change.

I know it's not possible to change the parent DIV's background on a:hover, but I figured I could give the illusion of it happening by nesting a hidden image inside the anchor. This works great until I want to "roll off".

The problem is that I want the image to disappear when I leave the area of the anchor tag, not the larger hidden image. Is this possible?

For the benefit of everyone I've provided an example to demonstrate what I mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test Rollover</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="d1">
        <a href="#nogo">
            <b id="b1"></b>
            <b id="b2"></b> 
        </a>
    </div>
</body>

And the css:

#b1
{
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background-color:aqua;
position: absolute;
}
#b2
{
width: 400px;
height: 400px;
background-color:lime;
position: absolute;
display: none;
}
#d1
{
width: 400px;
height: 400px;
background-color:fuchsia;
position: relative;
}
#d1 a:hover #b2
{
display: block; 
} 

In this example I want the green outer square to disappear when I leave the bounds of the hidden inner blue square.

© Stack Overflow or respective owner

Related posts about css