css：对当前和先前元素的悬停效果

Posted 2023-05-08

【中文标题】css：对当前和先前元素的悬停效果

【英文标题】：css :hover effect on current and previous elements

【发布时间】：2014-02-07 09:56:47

【问题描述】：

我有很多 5 里的无序列表，每个赞

 <ul class="Rank">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 </ul>

我想更改当前li:hover 元素的background-color 以及该列表中所有以前的li 元素。假设，如果我将鼠标悬停在第 3 个 li 上，那么第 3 个、第 2 个和第 1 个 li 应该有 background-color:#00f;

我可以用 jQuery 或 javascript 来做，但我想用纯 CSS 做。目前关注本文：http://css-tricks.com/useful-nth-child-recipies/

我可以使用此.Rank li:hover 更改当前悬停的li 元素的背景，但不明白如何更改当前.Rank 列表中先前元素的background-color。

从上面的文章我也学会了改变背景直到nth-chid，但不知道如何在上面应用:hover。

.Rank li:nth-child(-n+5)

    background-color:#00f;

【问题讨论】：

没有先前的兄弟选择器。仅使用 CSS 无法完成，请使用 javascript

@ZachSaucier 正如我在上一个代码中所说的那样，有先前的兄弟选择。它可能不是完全以前的兄弟选择器，但可以完成这项工作，但无法弄清楚如何对其应用悬停效果。我的上一个代码在上一个兄弟更改背景中运行良好。

您提供的选择器不会选择以前的元素，只是针对子节点。有这个限制

你也可以使用JQuery:JImlD.

@ZachSaucier 我们找到了爱因斯坦来了解苹果是如何落到地球上的。谢谢大家

【参考方案1】：

http://jsfiddle.net/coma/PLBYG/2/

或

http://jsfiddle.net/coma/PLBYG/3/

ul.rank 
    margin: 0;
    padding: 0;
    list-style: none;


ul.rank > li 
    position: relative;
    margin: 0;
    height: 30px;
    background: #ccc;
    transition: background-color 350ms;


ul.rank:hover > li 
    background-color: #00f;


ul.rank > li + li 
    margin-top: 10px;


ul.rank > li:hover ~ li 
    background: #ccc;


ul.rank > li + li:before 
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;

或者！！！

http://jsfiddle.net/coma/PLBYG/4/

ul.rank 
    margin: 0;
    padding: 0;
    list-style: none;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);

【讨论】：

我喜欢这些 CSS 挑战！

哇！超级棒@coma。你就像 CSS 的爱因斯坦 :)。爱你的男人

我不敢相信，因为其他人都说没有 Javascript 是不可能的，爸爸来了

欢迎您。如果听起来可以用 css 完成，我只是不想考虑用 js 做点什么。顺便说一句，您必须承认您在短短几分钟内就获得了 75 个 LOL！再次感谢您的宝贵时间

@coma Einstein 先生，您可以在不使用 javascript 或 jquery 的情况下将鼠标悬停在此问题***.com/questions/10483323/… 中所述的其他课程上时帮助我更改其他课程。请我需要你的帮助，因为每个人都说这是不可能的

【参考方案2】：

发布我的答案以供参考（供那些后来像我一样查看此内容的人）。 这是一个不使用:before 或:after 的解决方案。

http://jsfiddle.net/nLCZK/

它对所有lis 使用float: right，您还必须按照您希望它们出现的相反顺序放置lis。