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

Question

现在让我们看看，不确定我是否有100％的逻辑。

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

<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 ，发布和年份中文本的颜色会发生变化。 我也在寻找一种方法来改变同类的第一个span.category的颜色（即悬停“另一个帖子”应该改变第一个.row中span.category的颜色）。 这是用纯CSS实现的吗？

Answer 1

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

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

我只是在你的小提琴中检查了DOM，我想改变一些东西。

演示 （ hover一个你好，并看到第一个span颜色将被更改）

演示2 （DOM改变） - 这只是一个大概的想法，我已经为你提供了选择器，但无论如何这将需要DOM改变..

---

在您的代码中更改演示

---

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

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

最终演示