CSS兄弟选择器和悬停状态

Question

CSS兄弟选择器和悬停状态

11

这是我想做的事情：

我有两个并排的图标，在它们下方有两个隐藏的span。当我将鼠标悬停在一个图标上时，我希望相应的span出现。

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

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/

- eklassen

基本上，你不能这样做，因为你无法“向上”遍历层次结构。如果由于某种原因无法更改HTML，则最好的选择是JavaScript。 - xec

1

可能是重复的话题 [链接]https://dev59.com/b2Ml5IYBdhLWcg3wCDGW - Hugo S. Mendes

上面的列表结构无效。列表项必须是列表的子元素。 - isherwood

4个回答

1

你需要弹出窗口对应的图标成为兄弟元素。

演示

HTML：

<a href="#" class="icon1">one</a>
<span class="one">one</span>

<a href="#" class="icon2">two</a>    
<span class="two">two</span>

CSS：

span.one, span.two {
    display:none;
}
a.icon1:hover + span.one {
    display:inline;
}
a.icon2:hover + span.two {
    display:inline;
}

- sundance

0

如果你需要像我一样隐藏鼠标悬停的块，可以这样做：

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：

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

这个想法是使用父级 div 触发 hover 事件。当事件被捕获后，更改子 div 的 display/opacity/visibility 等属性。

JSFiddle演示

- Unicorn

0

你可以通过将弹出窗口放置在图标内来解决这个问题。然后，你可以使用CSS来控制它们，并使用绝对定位将它们放置在其他位置：

CSS:

li {
    position: relative;
}

li span {
    display: none;
    position: absolute;
    left: 0; top: 100%;
}

li:hover span {
    display: block;
}

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>

代码片段：http://jsfiddle.net/SK4Np/2/

- GolezTrol

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

让我先解释一下您的选择器，它是：

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

好的，你正在尝试选择嵌套在下的第一个子元素上，并且在悬停时选择嵌套在下的中的，但是你在这里做错了，你选择了相邻的具有.popups的元素，而不是嵌套在.icons内部的元素，但总的来说，你的选择器是错误的，CSS不能选择父级，简而言之，CSS进入一个元素后就不能往回移动层次结构。

所以你不能这样做，要么你需要改变DOM，将所有元素放到同一层级，要么你的隐藏应该在子级别。

另一种实现方式是使用position，但我不建议在这里使用。

此外，你的标记无效，你需要在li周围加上ul元素。

让我们改变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;
}

演示

我该如何实现这个效果？

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

你也可以使用display或visibility属性，如果你不想使用opacity，因为它们非常适合在你想要使用transition来过渡一个元素的时候使用。

Demo 3 (如果你选择使用opacity方法，则使用transition)