Html CSS 悬停显示另一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18749276/
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
CSS On hover show another element
提问by user2770029
I want to use CSS to show div id='b'when I hover over div id='a', but I cannot figure out how to do it because the div 'a'is inside another divthat div 'b'is not in.
我想用CSS显示div id='b'，当我悬停div id='a'，但我无法弄清楚如何做到这一点，因为div 'a'里面另一个div认为div 'b'是不在家。
<div id='content'>
<div id='a'>
Hover me
</div>
</div>
<div id='b'>
Show me
</div>
回答by Ankit Agrawal
we just can show same label div on hovering like this
我们可以像这样悬停时显示相同的标签 div
<style>
#b {
display: none;
}
#content:hover~#b{
display: block;
}
</style>
回答by Sharath kumar
It is indeed possible with the following code
确实可以使用以下代码
<div href="#" id='a'>
Hover me
</div>
<div id='b'>
Show me
</div>
and css
和CSS
#a {
display: block;
}
#a:hover + #b {
display:block;
}
#b {
display:none;
}
Now by hovering on element #a shows element #b.
现在通过悬停在元素#a 上显示元素#b。
回答by Rounin
You can use axeselectors for this.
您可以为此使用ax选择器。
There are two approaches:
有两种方法：
1. Immediate Parent axe Selector (<)
1. 直接父斧选择器 ( <)
#a:hover < #content + #b
This axestyle rule will select #b, which is the immediate sibling of #content, which is the immediate parent of #awhich has a :hoverstate.
这个ax样式规则将选择#b，它是 的直接兄弟#content，它是其直接父级#a具有:hover状态。
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}
#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}
#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}
#a:hover < #content + #b {
display: inline-block;
}<div id="content">
<div id="a">Hover me</div>
</div>
<div id="b">Show me</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>2. Remote Element axe Selector (\)
2. 远程元素斧选择器 ( \)
#a:hover \ #b
This axestyle rule will select #b, which is present in the same document as #awhich has a :hoverstate.
此ax样式规则将选择#b，它存在于#a具有:hover状态的同一文档中。
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}
#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}
#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}
#a:hover \ #b {
display: inline-block;
}<div id="content">
<div id="a">Hover me</div>
</div>
<div id="b">Show me</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>