CSS Rollovers: how to maintain "hit area" size when hidden image is larger than anchor area
- by nukefusion
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;
z-index: 100;
}
#b2
{
width: 400px;
height: 400px;
background-color:lime;
position: absolute;
display: none;
z-index: 90;
}
#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.
