带有悬停的CSS同级选择器 [英] CSS Sibling Selector w/ Hover

问题描述

这就是我想要做的：

我有两个并排的图标，下面有两个隐藏的跨度。当我将鼠标悬停在图标上时，我希望显示相应的跨度。

------------ HTML Part ------ -----------

 < 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 ----- ---------

  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} 
  

现在很明显，这并不奏效，我将如何使用CSS？

http://jsfiddle.net/RLhKK/ p>

解决方案

让我首先解释您的选择器，它是

  span.icons：first-child：hover + span.popups span.one {opacity：1} 
  

好吧，您正在尝试选择嵌套在 span.icons 下的第一个孩子，并选择 span.one 嵌套在 span.popups 中，但您在这里出错，您正在选择相邻的 span 具有 .popups 的元素，它不与嵌套在 span 中的< .icons ，但一般来说，您的选择器是错误的， CSS无法选择父级，inshort，CSS一旦进入元素就无法返回，它不能向上移动层级。

所以你不能这样做，无论你需要改变你的DOM，并把所有 span 元素放在同一级别，或者你的隐藏的 span 应该在孩子的水平。

另一种方法是使用位置，我不会在这里建议。

另外，你的标记是无效的，你需要在 li

< / code>。

---

让我们改变DOM，看看我们如何选择

 < span class =icons><！ - 使用div更好 - > 
< ul> 
< li class =oneLI> one< br />< span class =one>向我展示< / span>< / li> 
< li class =twoLI> two< br />< span class =two>向我展示< / li> 
< / ul> 
< / span> 
 
 .icons li>跨度{
不透明度：0; 
} 
 
 .icons li：hover>跨度{
不透明度：1; 
} 
  

演示 已经达到了这个目标？

演示2

 < div class =icons> 
< span class =hoverme>悬停我< / span> 
< div id =hover1>第一个< / div> 
< span class =hoverme>悬停我< / span> 
< div id =hover2>第二个< / div> 
< / div> 
 
 .icons> div [id] {
 opacity：0; 
 height：100px; 
 width：100px; 
背景：红色; 
} 
 
 .icons> span {
 display：block; 
} 
 
 .icons> span：hover + div {
 opacity：1; 
 
  

---

您可以使用 display 或 visibilty 属性，如果您不想使用 opacity ，因为它们非常适合于当您要使用转换来转换元素时。

演示3 （使用 transition 如果你要为 opacity 方法）

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 -----------------

<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 --------------

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?

http://jsfiddle.net/RLhKK/

解决方案

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-child nested under span.icons and on hover of that you select span.one which is nested inside span.popups but you are going wrong here, you are selecting adjacent span element having .popups which is not adjacent to the span which 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.

So you cannot do that way, either you need to alter your DOM, and bring all the span elements at the same level, or your hidden span should be at the child level.

And another way to achieve this is by using position, which I won't suggest here.

Also, your markup is invalid, you need to have ul element around li.

---

Lets alter the DOM and see how we can select

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

Demo

---

How would I've achieved this?

Demo 2

<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 display or visibilty property as well, if you do not want to use opacity as they are well suited when you want to transit an element using transition.

Demo 3 (Using transition if you are going for opacity method)

这篇关于带有悬停的CSS同级选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！