Html 如何在悬停在另一个元素上时更改一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8614423/
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
How to change one element while hovering over another
提问by Neros
I have looked at several other questions but I cant seem to figure any of them out, so here is my problem, i would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
我已经查看了其他几个问题，但我似乎无法弄清楚其中的任何一个，所以这是我的问题，我想要一个 div 或一个跨度，当你将鼠标悬停在它上面时，一个区域会出现，就像一个水滴下。
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
比如我有一个 div，我想将鼠标悬停在它上面并让它显示一些关于我悬停在上面的项目的信息
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p><a href="#">Cheetah</a></p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesnt seem to work, I dont know why... and if there is a way to do that in css, I would like to know, but I want any and all suggestions.
但这 ^ 似乎不起作用，我不知道为什么......如果有办法在 css 中做到这一点，我想知道，但我想要任何和所有建议。
回答by ptriek
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
仅当隐藏的 div 是用于悬停的元素的子级时，您才能在 CSS 中实现此目的：
回答by OverZealous
You cannot affect a non-child element using :hoverfrom within CSS2, which is supported by all common browsers.
您不能:hover在所有常见浏览器都支持的 CSS2 中使用from影响非子元素。
You can affect a sibling element using CSS2.1 selectors, like so:
您可以使用 CSS2.1 选择器影响同级元素，如下所示：
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
但是，这只适用于直接兄弟姐妹。这意味着你可以有这样的 HTML：
<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>
Notice that the aand the spanare direct siblings.
请注意，a和span是直接兄弟。
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
这是一个显示兄弟姐妹工作的小提琴：http: //jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
但是，并非所有浏览器都支持 CSS2.1 兄弟选择器，因此您需要根据目标受众决定是否可以使用它。
Edit: Corrected my mistake on the CSS version for the +selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
编辑：更正了我在+选择器的 CSS 版本上的错误：定义它的是 2.1，而不是 CSS3。我还添加了一个显示浏览器支持的链接。否则，答案是一样的。
回答by Purag
Or, if you're open to it, use jQuery.
或者，如果您愿意，请使用jQuery。
Something like this would work:
像这样的事情会起作用：
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...});or $(document).ready(function(){...});).
并记住将其包装在一个 DOM 就绪函数（$(function(){...});或$(document).ready(function(){...});）中。
回答by brandonscript
You can absolutely do this in CSS3 now using the ~adjacent sibling selector.
你现在完全可以在 CSS3 中使用~相邻的兄弟选择器来做到这一点。
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
例如，如果您希望将鼠标悬停在相邻按钮上时显示工具提示：
.button:hover ~ .tooltip {
display: block;
}
