悬停元素，在父元素的兄弟子元素上显示悬停效果

Question

悬停元素，在父元素的兄弟子元素上显示悬停效果

3

现在我们来看一下，我不确定是否已经完全掌握了逻辑。

以下是我正在使用的内容（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 中的 a 元素时，更改出版物和年份文本的颜色。我还在寻找一种方法来更改相同类型的第一个 .row 中的 span.category 的颜色（即悬停“另一篇文章”应更改第一个 .row 中的 span.category 的颜色）。这是否可以通过纯 CSS 实现？

- INT

1

我怀疑需要脚本编写以及CSS。 - Nitesh

为什么不将hover应用于li元素，并编写如下CSS：li:hover .title{...}，li:hover .category{...} - Andrew

@user2549787 没错！ - INT

@Andrew 因为我希望悬停区域仅限于 span.title 中的 a 元素。 - INT

@INT 我认为这在纯CSS中不可能实现，因为您无法选择前一个兄弟元素 :S - nkmol

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

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

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

我刚刚检查了您的fiddle中的DOM，并希望对其中的一些内容进行修改。

演示（hover在hello上，看到第一个span颜色会改变）

演示2（DOM已更改）- 这只是一个大致的想法，我已经为您提供了选择器，但这仍需要进行DOM更改。

在你的代码中更改了演示。

根据您的评论，现在您可以突出显示所有带有标题的标签。

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

最终演示