带悬停的 CSS 兄弟选择器

Posted 2023-05-08

【中文标题】带悬停的 CSS 兄弟选择器

【英文标题】：CSS Sibling Selector w/ Hover

【发布时间】：2014-02-15 22:45:09

【问题描述】：

这就是我想要做的：

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

------------ 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.twoopacity:0;

span.icons:first-child:hover + span.popups span.oneopacity:1
span.icons:last-child:hover + span.popups span.twoopacity:1

现在显然这不太行，我将如何只使用 CSS 来解决这个问题？

http://jsfiddle.net/RLhKK/

【问题讨论】：

基本上，你不能，因为你不能去“备份”层次结构。如果由于某种原因无法更改 HTML，最好的选择是 javascript。

可能重复的主题 [link]***.com/questions/18749276/…

【参考方案1】：

让我先解释一下你的选择器

span.icons:first-child:hover + span.popups span.oneopacity:1

好吧，您正在尝试选择嵌套在 span.icons 下的 first-child 并在悬停时选择嵌套在 span.popups 内的 span.one 但您在这里出错了，您正在选择具有.popups 的相邻span 元素，该元素与嵌套在.icons 内的span 不相邻，但通常，您的选择器错误，CSS 无法选择父级，简而言之，CSS 无法返回一旦它进入一个元素，它就不能向上移动。

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

实现此目的的另一种方法是使用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;

Demo

---

我是如何做到这一点的？

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;

---

如果您不想使用opacity，也可以使用display 或visibilty 属性，因为它们非常适合使用transition 传输元素。

Demo 3 （如果您要使用opacity 方法，请使用transition）

【讨论】：

@GolezTrol 耐心耐心 :) 正在编辑我的答案

如果我想让“Hover Me's”并排放置，我该怎么做？

【参考方案2】：

你需要弹出窗口对应的图标是兄弟。

Demo

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;

【参考方案3】：

您可以通过将弹出窗口放在图标内来解决此问题。 然后，您可以使用 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/

【参考方案4】：

如果您需要像我一样隐藏悬停在上面的块，您可以执行以下操作：

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 来触发悬停事件。捕获事件后更改子 div 的显示/不透明度/可见性等。

JSFiddle Demo