悬停元素，在父元素兄弟姐妹子元素上显示悬停效果

Posted 2023-03-06

【中文标题】悬停元素，在父元素兄弟姐妹子元素上显示悬停效果

【英文标题】：Hover element, show hover effect on parent elements siblings child

【发布时间】：2013-12-07 01:27:12

【问题描述】：

现在让我们看看，不确定我的逻辑是否 100% 下降。

这就是我正在使用的（bootply 演示 here）

<ul>
    <li class="row">
        <span class="category col-sm-2 highlight">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Hello world!</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Keep them coming</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">The other posts</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2">Cities</span> 
        <span class="title col-sm-4"><a href="#">Tezt</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
</ul>

这个想法是，当将 a 元素悬停在 span.title 中时，出版物和年份中的文本颜色会发生变化。我也在寻找一种方法来改变同类型的第一个span.category 的颜色（即悬停“另一个帖子”应该会改变第一个.row 中span.category 的颜色）。这可以通过纯 CSS 实现吗？

【问题讨论】：

我怀疑。脚本需要与 css 一起使用。

恐怕不仅仅是 CSS

为什么不把鼠标悬停在li上，让css像：li:hover .title..., li:hover .category...

当任何具有该类别的跨度悬停时，您是在这里寻找悬停Architecture 吗？

@user2549787 没错！

【参考方案1】：

我明白你在这里想要做什么，在这种情况下，你可以使用下面的选择器.. 这样当li 悬停时，它也会将颜色应用于第一个span

.row:hover span:nth-of-type(1) 
   color: red;

我刚刚检查了您小提琴中的 DOM，我想更改其中的一些内容..

Demo（hover 一个 hello 并看到第一个 span 颜色会改变）

Demo 2（DOM 已更改）- 这只是一个总体思路，我已经为您提供了选择器，但无论如何这都需要 DOM 更改..

---

在您的代码中更改了Demo

---

再次根据您的评论，现在您可以突出显示所有 span 及其标题

ul li div.row:hover > span 
   color: red;

Final Demo

【讨论】：

+1 来自我，你将你的优点恢复到你应得的积极状态；） - @Mr.Alien

让它“完美” - @BindiyaPatoliya

是的，那是我 :) 他确实在悬停.title 元素时说过，现在第一个元素将始终在悬停.row 时更改，而不仅仅是在悬停.title 时更改。 IMO，这在 CSS 中是不可能的，因为你不能选择以前的兄弟姐妹。

这真的很棒@Mr.Alien 非常感谢！哇，我没想到会有这么大的兴趣:)

@INT 如果您认为悬停标题将为所有相关行着色而不是答案是否定的，您不能......您可以一次突出显示一行