懸停元素，顯示父元素兄弟姐妹的懸停效果

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;
}

最終演示