现在让我们看看,不确定我是否有 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 实现吗?
最佳答案
我明白你想在这里做什么,在这种情况下,你可以使用下面的选择器.. 这样当 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;
}
关于html - 悬停元素,在父元素 sibling child 上显示悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20140240/