CSS Rollovers: how to maintain "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:34 UTC
Read the original article
Hit count: 317
css
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.
© Stack Overflow or respective owner
