CSS Rollovers: how to maintain "hit area" size when hidden image is larger than anchor area
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?
Fo开发者_如何学Gor 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.
I don't think that there is any way to do this using pure CSS. No matter how you slice it, you're trying to target the parent of the hovered element, and even if you found a hack it would probably be browser dependent.
Best recommendation here is to define a basic rollover for graceful degradation and then use JS to add a class for the real effect you want.
http://www.webdevout.net/test?0q&raw ↴
<!doctype html>
<html>
<head>
<title></title>
<style>
#box {
position: relative;
}
#back {
width: 200px;
height: 200px;
padding: 100px;
background: fuchsia;
}
a {
display: block;
width: 200px;
height: 200px;
background: aqua;
position: relative;
}
span {
display: none;
position: absolute;
background: lime;
}
a:hover
span {
display: block;
}
span.n {
width: 400px;
height: 100px;
left: -100px;
top: -100px;
}
span.e {
width: 100px;
height: 200px;
right: -100px;
top: 0;
}
span.s {
width: 400px;
height: 100px;
left: -100px;
bottom: -100px;
}
span.w {
width: 100px;
height: 200px;
left: -100px;
top: 0;
}
div.n,
div.e,
div.s,
div.w {
position: absolute;
z-index: 1;
}
div.n {
width: 400px;
height: 100px;
left: 0;
top: 0;
}
div.e {
width: 100px;
height: 200px;
left: 300px;
top: 100px;
}
div.s {
width: 400px;
height: 100px;
left: 0;
top: 300px;
}
div.w {
width: 100px;
height: 200px;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="back">
<a href="#">
<span class="n"></span>
<span class="e"></span>
<span class="s"></span>
<span class="w"></span>
</a>
</div>
<div class="n"></div>
<div class="e"></div>
<div class="s"></div>
<div class="w"></div>
</div>
</body>
</html>
No IE6 support, and probably not worth using regardless.
加载中,请稍侯......
精彩评论