悬停在其他 div 元素上方时更改一个 div 元素的属性答案

【问题标题】：Changing properties of one div element when hovering above other div elements悬停在其他 div 元素上方时更改一个 div 元素的属性
【发布时间】：2011-03-26 10:20:30
【问题描述】：

很抱歉再次提出这个问题，因为我很确定它在here 之类的线程中得到了回答，但在旧线程中发布似乎毫无意义。但我想知道这是否仍然是真的，我实际上需要 jQuery（或类似的东西）以便在悬停在其他 div 元素上方时更改一个 div 元素的属性？

如果答案仍然是肯定的，请看下图：

这是我现在正在努力实现的导航的一部分。如您所见，按钮下方有某种镜像效果。我希望这些按钮在“悬停”背景位置/背景图像更改时可以点击。我尝试使用单个 div 元素来做到这一点，但由于按钮区域本身小于整个图形，因此即使我将鼠标悬停在反射上方，按钮也已准备好使用，这不是很直观.

目前我正在使用 div 元素来显示背景图像，包括悬停效果和 - 抱歉，但我真的不知道如何描述以下内容 - 某种“不可见”文本链接，它被强制到特定的大小以模拟可点击区域。这是一个小的可视化：

绿色是背景图像的区域，当鼠标悬停在 div 元素上方时会发生变化，红色区域是“按钮”。

那么问题又来了……我是否仍然需要像 jQuery 这样的东西才能让这种悬停效果只有在我将鼠标悬停在按钮区域上方时才起作用，是否有不同的方法或者……像 jQuery 这样的东西真的是唯一的答案到那个？

【问题讨论】：

使用纯 CSS (2.1)，您只能使选择器更深入 DOM 树。因此，将鼠标悬停在父元素上可以更改子元素，但反之则不行。所以没有悬停在孩子身上可以改变它的父母。有了 jQuery，其他可能性就打开了。

标签： css html hover

【解决方案1】：

我有一个适用于 Firefox 3.6 的快速解决方案，您可以try it at jsFiddle。

这并不完全是您问题的答案，而是为您的设计提供了解决方案。

HTML：

<div id="container">
    <a href="target1.html" id="button1">
        <div id="reflection1-active"></div>    
    </a>
    <div id="reflection1-inactive"></div>
</div>

CSS：

#container{
    position: relative;   
}
#button1{
    background-color: #900;
    height: 32px;
    width: 80px;
    display: block;   
    position: absolute;
    z-index: 10;
}
#button1:hover{
    background-color: #F00;
}
#button1 #reflection1-active{
    position: absolute;
    background-color: #f77;   
    height: 32px;
    width: 80px;
    display: block;
    top: 32px;
    display: none;
}
#button1:hover #reflection1-active{
    display: block;
}
#button1 #reflection1-active:hover{
    display: none;   
}
#reflection1-inactive{
    background-color: #977;
    height: 32px;
    width: 80px;
    top: 32px;
    display: block;
    position: absolute;
    z-index: 0;
}

【讨论】：

我现在正在工作，但它看起来就像我正在寻找的东西，我稍后会玩这个，谢谢！
考虑到我的目标，我不得不采用以下解决方案：stackoverflow.com/questions/5637611/… - 非常感谢！

【解决方案2】：

当您将鼠标悬停在另一个元素（父 div）内的一个元素（链接/按钮）上时，您实际上仍然悬停在父元素上，因此您可以同时影响它们两个：

HTML: <div><a href="#">the button</a></div>

CSS：

div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #000;}

div:hover {background: #cfc;}
a:hover {background: #eee;}

如果我对问题的理解正确，则无论您是否在“按钮区域”（div:hover）上，背景（绿色到浅绿色）都会发生变化，而按钮区域只会在您位于时发生变化在按钮本身上，因为它仅受 a:hover 影响

[更新]

实际上我想我误解了这个问题：您只想在悬停<a>（按钮）时更改div的背景图像？

将新的完整背景放在<a> 上并让它改变它的高度，这将意味着更大的“按钮”区域，但这只会在按钮实际悬停在上面时

试试这个 CSS：

div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #eee;}

a:hover {background: #000; height: 200px;}

【讨论】：

【解决方案3】：

我不知道是否有浏览器支持这个，我从来没有尝试过，但是......你可以使用选择器来选择与悬停元素相邻的兄弟元素，然后使用相邻元素来渲染阴影吗？由于相邻元素不是可悬停元素的子元素，因此悬停在其上不会触发悬停选择匹配。

【讨论】：