当鼠标悬停在其他div元素上方时，更改一个div元素的属性

Question

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

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

这是我现在想要实现的导航的一部分。 如您所见，按钮下面有某种镜像效果。 我希望这些按钮可以在进行“悬停”背景位置/背景图像更改时进行点击。 我尝试用一​​个div元素来做到这一点，因为按钮区域本身比整个图形小，所以即使当我在反射上方悬停时按钮已准备好使用，这不是很直观。

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

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

所以问题再一次......我还需要像jQuery这样的东西，只有当我将鼠标悬停在按钮区域上方时，才能使这种悬停效果有效，是否有不同的方法或... ... jQuery真的是唯一的答案吗？

Answer 1

我有一个在Firefox 3.6中运行的快速解决方案，你可以在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;
}

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

Answer 3

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