html - 悬停元素，在父元素 sibling child 上显示悬停效果

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>

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

Answer 1

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

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

我刚刚检查了你的 fiddle 中的 DOM，我想改变其中的一些东西..

Demo (悬停 hello 并看到第一个 span 颜色将更改)

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

---

已更改 Demo在你的代码中

---

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

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

Final Demo