Question

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

这就是我正在使用的（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>

这个想法是，当将一个元素悬停在span.title中时，发布和年份中文本的颜色会发生变化。我也正在寻找一种方法来改变同类span.category的第一种颜色（即悬停“其他帖子”应改变第一span.category中.row的颜色）。这是用纯CSS实现的吗？

Answer 1

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

span

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

Demo（ hello 的.row:hover span:nth-of-type(1) { color: red; }并看到第一个hover颜色将被更改

Demo 2（DOM Altered） - 这只是一个大致的想法，我已经为你提供了选择器，但无论如何都需要DOM更改..

在您的代码中更改Demo

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

span

Final Demo

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

1 个答案: