代码之家 › 专栏 › 技术社区 › Matt B

CSS滚动:隐藏图像大于定位区域时如何保持“命中区域”大小

css

Matt B · 技术社区 · 15 年前

我有一个小问题,我不认为我想做的只是单纯的CSS,但我想我会问。

基本上,我有一个DIV,它包含一个超链接元素,这个元素的大小比它的父DIV小,所以实际上,我在一个正方形内有一个正方形,内正方形是“命中区域”。当我把鼠标移到这个内方格上时,我想改变外方格的背景。

我知道在悬停状态下不可能改变父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; 
}

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

2 回复 | 直到 15 年前

Joe Mastey 15 年前

我不认为有任何方法可以使用纯CSS来实现这一点。不管你如何分割它,你都在尝试以悬停元素的父元素为目标,即使你发现了一个黑客,它也可能依赖于浏览器。

这里最好的建议是为优雅的降级定义一个基本的滚动,然后使用JS添加一个类来实现您想要的实际效果。

reisio 15 年前

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 可能不值得使用。