Html 带有悬停功能的 CSS 兄弟选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21341157/
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 Sibling Selector w/ Hover
提问by eklassen
So here's what I'm trying to do:
所以这就是我想要做的：
I have two icons side by side, and underneath I have two spans that are hidden. When I mouse-over an icon I want the corresponding span to appear.
我有两个并排的图标，在下面我有两个隐藏的跨度。当我将鼠标悬停在图标上时，我希望出现相应的跨度。
------------ HTML Part -----------------
------------ HTML 部分 -----------------
<span class="icons"><!--ICONS-->
<li class="oneLI">one</li>
<li class="twoLI">two</li>
</span>
<span class="popups">
<span class="one"></span>
<span class="two"></span>
</span>
--------------CSS Part --------------
--------------CSS 部分--------------
span.popups span.one,span.popups span.two{opacity:0;
span.icons:first-child:hover + span.popups span.one{opacity:1}
span.icons:last-child:hover + span.popups span.two{opacity:1}
Now obviously this doesn't quite work, how would I go about this using only CSS?
现在显然这不太有效，我将如何仅使用 CSS 来解决这个问题？
采纳答案by Mr. Alien
Let me explain your selector first which is
让我先解释一下你的选择器
span.icons:first-child:hover + span.popups span.one{opacity:1}
Well, you are trying to select the first-childnested under span.iconsand on hover of that you select span.onewhich is nested inside span.popupsbut you are going wrong here, you are selecting adjacent spanelement having .popupswhich is not adjacent to the spanwhich is nested inside .icons, but in general, your selector is wrong, CSS cannot select the parent, inshort, CSS cannot go back once it enters an element, it cannot move up the hierarchy.
好吧，您正在尝试选择嵌套在您选择的嵌套在其下方和悬停的第一个子元素，但是您在这里出错了，您正在选择与嵌套在 内的元素不相邻的相邻元素，但是在一般来说，你的选择器是错误的，CSS不能选择父元素，总之，CSS一旦进入一个元素就不能返回，它不能向上移动层次结构。span.iconsspan.onespan.popupsspan.popupsspan.icons
So you cannot do that way, either you need to alter your DOM, and bring all the spanelements at the same level, or your hidden spanshould be at the child level.
所以你不能这样做，要么你需要改变你的 DOM，并将所有span元素放在同一级别，要么你的隐藏元素span应该在子级别。
And another way to achieve this is by using position, which I won't suggest here.
实现这一目标的另一种方法是使用position，我不会在这里建议。
Also, your markup is invalid, you need to have ulelement around li.
此外，您的标记无效，您需要ul在li.
Lets alter the DOM and see how we can select
让我们改变 DOM，看看我们如何选择
<span class="icons"><!-- Better use div here -->
<ul>
<li class="oneLI">one <br /><span class="one">Show Me</span></li>
<li class="twoLI">two <br /><span class="two">Show me as well</span></li>
</ul>
</span>
.icons li > span {
opacity: 0;
}
.icons li:hover > span {
opacity: 1;
}
How would I've achieved this?
我怎么会做到这一点？
<div class="icons">
<span class="hoverme">Hover Me</span>
<div id="hover1">First</div>
<span class="hoverme">Hover Me</span>
<div id="hover2">Second</div>
</div>
.icons > div[id] {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
.icons > span {
display: block;
}
.icons > span:hover + div {
opacity: 1;
}
You can use displayor visibiltyproperty as well, if you do not want to use opacityas they are well suited when you want to transit an element using transition.
您也可以使用display或visibilty属性，如果您不想使用opacity它们，因为它们非常适合您想使用transition.
Demo 3(Using transitionif you are going for opacitymethod)
演示 3（transition如果您要使用opacity方法）
回答by sundance
You need the popups corresponding icons to be siblings.
您需要弹出窗口对应的图标是兄弟姐妹。
HTML:
HTML：
<a href="#" class="icon1">one</a>
<span class="one">one</span>
<a href="#" class="icon2">two</a>
<span class="two">two</span>
CSS:
CSS：
span.one, span.two {
display:none;
}
a.icon1:hover + span.one {
display:inline;
}
a.icon2:hover + span.two {
display:inline;
}
回答by Romeno
If you needed to hide block you are hovering upon as I did you can do something like this:
如果你需要隐藏你像我一样悬停的块，你可以做这样的事情：
HTML:
HTML：
<div class="menu-block">
<div class="menu-block-inner">
Menu (Hover me)
</div>
<div class="menu-expanded">
<span><a href="#">Menu item1</a></span>
<span><a href="#">Menu item2</a></span>
</div>
</div>
CSS:
CSS：
.menu-block {
display: inline-block;
}
.menu-block:hover .menu-block-inner{
display: none;
}
.menu-block:hover .menu-expanded{
display: inline-block;
}
.menu-expanded {
display: none;
}
The idea is to use parent div to trigger the hover event. After event is caught change child div's display/opacity/visibility, etc.
这个想法是使用父 div 来触发悬停事件。事件被捕获后，更改子 div 的显示/不透明度/可见性等。
回答by GolezTrol
You can solve this by putting the popups inside the icons. You can then address them using CSS, and position them somewhere else using absolute positioning:
您可以通过将弹出窗口放在图标内来解决此问题。然后，您可以使用 CSS 定位它们，并使用绝对定位将它们定位在其他位置：
CSS:
CSS：
li {
position: relative;
}
li span {
display: none;
position: absolute;
left: 0; top: 100%;
}
li:hover span {
display: block;
}
HTML:
HTML：
<ul class="icons"><!--ICONS-->
<li class="oneLI">one<span class="one">Popup for one.</span></li>
<li class="twoLI">two<span class="two">Popup for one.</span></li>
</ul>
Fiddle: http://jsfiddle.net/SK4Np/2/
