Html 悬停在其他 div 元素上方时更改一个 div 元素的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5441662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing properties of one div element when hovering above other div elements
提问by Chromax
Sorry to bring this up again since I am quite sure it was answered in threads like here, yet posting in older threads appears to be pointless. But I'd like to know whether this is still true that I will in fact need jQuery (or something similar) in order to change the properties of one div-element when hovering above some other div-element?
很抱歉再次提出这个问题，因为我很确定它在像这里这样的线程中得到了回答，但在旧线程中发布似乎毫无意义。但我想知道这是否仍然是真的，我实际上需要 jQuery（或类似的东西）以便在悬停在其他 div 元素上方时更改一个 div 元素的属性？
If the answer would still be yes, please have a look at the following picture:
如果答案仍然是肯定的，请看下图：
This is part of my navigation I am trying to bring to life right now. As you can see there is some kind of mirror effect underneath the buttons. I want those buttons to be clickable while having a "hover" background-position / background-image change. I tried to do that with a single div-element which didn't work out since the button-area itself is smaller than the entire graphic so even when I was hovering above the reflection the button was ready to be used which was not very intuitive.
这是我现在正在努力实现的导航的一部分。如您所见，按钮下方有某种镜像效果。我希望这些按钮在“悬停”背景位置/背景图像更改时可点击。我试图用一个单一的 div 元素来做到这一点，因为按钮区域本身比整个图形小，所以即使我悬停在反射上方，按钮也可以使用，这不是很直观.
Currently I am using a div-element to display the background image including the hover effect and - sorry but I don't really know how to describe the following - some kind of "invisible" text link which is forced to a specific size in order to simulate a clickable area. Here a small visualization:
目前我正在使用 div 元素来显示背景图像，包括悬停效果和 - 抱歉，但我真的不知道如何描述以下内容 - 某种“不可见”文本链接，它被强制为特定大小模拟可点击区域。这是一个小可视化：
Green is the area of the background image which is changing upon hovering above the div-element and the red area is the "button".
绿色是背景图像的区域，它在悬停在 div 元素上方时发生变化，红色区域是“按钮”。
So again the question ... do I still need something like jQuery to get this hover effect working only when I hover above the button area, are there different approaches to this or ... is something like jQuery really the only answer to that?
那么问题又来了……我是否仍然需要像 jQuery 这样的东西才能使这种悬停效果仅在我将鼠标悬停在按钮区域上方时才起作用，是否有不同的方法来解决这个问题，或者……像 jQuery 这样的东西真的是唯一的答案吗？
采纳答案by pixelistik
I've got a quick solution that is working in Firefox 3.6, you can try it at jsFiddle.
我有一个适用于 Firefox 3.6 的快速解决方案，您可以在 jsFiddle 上试用。
It is not exactly the answer to your question, but offers a solution to your design.
它不完全是您问题的答案，但为您的设计提供了解决方案。
HTML:
HTML：
<div id="container">
<a href="target1.html" id="button1">
<div id="reflection1-active"></div>
</a>
<div id="reflection1-inactive"></div>
</div>
CSS:
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;
}
回答by clairesuzy
when you hover on an element (link/button) inside another element (parent div) you are actually still hovering on the parent element too so you can effect the two of them at the same time:
当您将鼠标悬停在另一个元素（父 div）内的元素（链接/按钮）上时，您实际上仍然悬停在父元素上，因此您可以同时影响它们两个：
HTML:
<div><a href="#">the button</a></div>
HTML：
<div><a href="#">the button</a></div>
CSS:
CSS：
div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #000;}
div:hover {background: #cfc;}
a:hover {background: #eee;}
If I'm understanding the question right, the background (green to lightgreen) changes no matter if you're on the "button area" or not (div:hover), whereas the button area only changes when you're on the button itself as it's effected by only the a:hover
如果我对问题的理解是正确的，无论您是否在“按钮区域”上，背景（绿色到浅绿色）都会发生变化（div:hover），而按钮区域仅在您处于按钮本身时才会发生变化仅受a:hover
[Update]
[更新]
actually I think I have misunderstood the question: you want to change the background image of the div only when you hover the <a>(button)?
实际上我想我误解了这个问题：您只想在悬停<a>（按钮）时更改 div 的背景图像？
put the new full background on the <a>and have it change it's height too it will mean a bigger "button" area, but that will only be when the button is actually hovered on anyway
把新的完整背景放在上面<a>并让它改变它的高度，这意味着一个更大的“按钮”区域，但这只会在按钮实际上悬停在上面时
try this CSS instead:
试试这个 CSS：
div {width: 100px; height: 200px; background: green;}
a {display: block; height: 100px; background: #eee;}
a:hover {background: #000; height: 200px;}
回答by Steve Jorgensen
I don't know whether any browsers support this, and I've never tried, but... Could you use a selector for a sibling adjacent to the hovered element, and then use the adjacent element to render the shadow? Since the adjacent element is not a child of the hoverable element, hovering over that would not trigger the hover selection match.
我不知道是否有任何浏览器支持这个，我从来没有尝试过，但是......你能不能对悬停元素相邻的兄弟使用选择器，然后使用相邻元素来渲染阴影？由于相邻元素不是可悬停元素的子元素，因此悬停在该元素上不会触发悬停选择匹配。
