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

Question

现在让我们看看，不确定我的逻辑是否 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 实现吗？

Answer 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