元素，显示对父元素兄弟姐妹子元素的悬停效果。

Question

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

这就是我正在做的事情(引导演示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>

其思想是，当span.title中的a元素悬停时，出版物和年份中的文本的颜色会发生变化。我还在寻找一种方法来更改同类第一个span.category的颜色(即在第一个.row中悬停“另一个帖子”应该改变span.category的颜色)。这能用纯CSS实现吗？

Answer 1

我明白你的意思了，在这里，你可以使用下面的选择器。这样，当li被悬停时，它也会将颜色应用到第一个span。

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

我刚刚检查了你小提琴里的DOM，我想改变一下.

Demo (hover‘s的问候和看到的第一个span的颜色将被改变)

Demo 2 (DOM改变了)-这只是一个一般的想法，我已经提供了选择器，但这将需要DOM修改无论如何。

更改代码中的Demo

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

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

Final Demo