Question

我有一个小问题，我不认为我想做的只能使用纯CSS，但我想我还是会问。

基本上，我有一个DIV，它包含一个超链接元素，它的大小小于它的父DIV。所以实际上我在一个正方形内有一个正方形，内部正方形是“命中区域”。当我将鼠标悬停在这个内部广场上时，我想要改变外部正方形的背景。

我知道不可能在a：hover上更改父DIV的背景，但我想我可以通过在锚点内嵌入隐藏的图像来表达它的错觉。这很有效，直到我想“滚动”。

问题在于，当我离开锚标签的区域时，我希望图像消失，而不是更大的隐藏图像。这可能吗？

为了每个人的利益，我提供了一个证明我的意思的例子：

<!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>

和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; 
}

在这个例子中，当我离开隐藏的内部蓝色方块的边界时，我希望绿色的外部正方形消失。

Answer 1

我认为使用纯CSS无法做到这一点。无论你如何分割它，你都试图瞄准悬停元素的父元素，即使你发现了一个hack，它也可能与浏览器有关。

这里最好的建议是为优雅降级定义一个基本的翻转，然后使用JS为你想要的真实效果添加一个类。

Answer 2

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>

否IE6 support，无论如何都不值得使用。

CSS Rollovers：当隐藏图像大于锚点区域时，如何保持“命中区域”大小

2 个答案: