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

【问题标题】：CSS Rollovers: how to maintain "hit area" size when hidden image is larger than anchor areaCSS Rollovers：当隐藏图像大于锚区域时如何保持“命中区域”大小
【发布时间】：2010-06-03 17:18:22
【问题描述】：

我有一个小问题，我认为仅使用纯 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; 
}

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

【问题讨论】：

如果您可以更明确地说明您想要实现的目标（以及原因），那么有人可能会提出更好的路线建议。

标签： css

【解决方案1】：

我认为没有任何方法可以使用纯 CSS 来做到这一点。无论您如何切片，您都在尝试定位悬停元素的父元素，即使您发现了一个 hack，它也可能取决于浏览器。

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

【讨论】：

【解决方案2】：

http://www.webdevout.net/test?0q&raw↴


    
        标题>
        
＃盒子 {
    位置：相对；
}
＃背部 {
    宽度：200px；
    高度：200px；
    填充：100px；
    背景：紫红色；
}
一个 {
    显示：块；
    宽度：200px；
    高度：200px；
    背景：水色；
    位置：相对；
}
跨度 {
    显示：无；
    位置：绝对；
    背景：石灰；
}
一：悬停
跨度 {
    显示：块；
}
跨度.n {
    宽度：400px；
    高度：100px；
    左：-100px；
    顶部：-100 像素；
}
跨度.e {
    宽度：100px；
    高度：200px；
    右：-100px；
    顶部：0；
}
跨度.s {
    宽度：400px；
    高度：100px；
    左：-100px；
    底部：-100px；
}
跨度.w {
    宽度：100px；
    高度：200px；
    左：-100px；
    顶部：0；
}
div.n,
潜水，
div.s,
div.w {
    位置：绝对；
    z-index：1；
}
div.n {
    宽度：400px；
    高度：100px；
    左：0；
    顶部：0；
}
潜水 {
    宽度：100px；
    高度：200px；
    左：300px；
    顶部：100 像素；
}
div.s {
    宽度：400px；
    高度：100px；
    左：0；
    顶部：300 像素；
}
div.w {
    宽度：100px；
    高度：200px；
    左：0；
    顶部：100 像素；
}
        
    
    
        
            
                
                    
                    
                    
                    
                
            
            
            
            
            
        
    正文>