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

Question

Let's see now, not sure if I have the logic down 100%.

This is what I'm working with (bootply demo 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>

The idea is that, when hovering the a element in span.title , the color of the text in publication and year is changed. I'm also looking for a way to change the color of the first span.category of the same kind (ie hovering "The other post" should change the color of span.category in the first .row ). Is this achievable with pure CSS?

Answer 1

I got your point what you are trying to do here, in this case, you can use the selector below.. so that when the li is hovered, it will also apply the color to the first span

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

I just inspected the DOM in your fiddle and I would like to alter some things in that..

Demo ( hover an of the hello and see the very first span color will be changed)

Demo 2 (DOM Altered) - This is just a general idea, I've provided you the selector but this will need the DOM alteration anyways..

---

Altered Demo in your Code

---

Again as per your comment, now you can highlight all span along with their titles

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

Final Demo