Question

我有这样的清单：

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

有没有办法在仅使用css和html时悬停第二个元素样式时更改第一个元素样式？

Answer 1

用css和html更改前一个元素是不可能的，但是如果你愿意使用JQuery，你可以使用它：

$('li').hover(function(){
    $(this).prev().toggleClass('someClass');
});

Demo

Answer 2

您可以更改下一个而不是之前的内容。要改变下一个：

<style>

ul li:hover+li {
/* CSS */
}

</style>

Answer 3

使用CSS你当然无法实现欲望输出，你必须使用jquery。

我尝试使用带有:target选择器的CSS来实现此功能，但需要添加一些额外的元素，例如a和href属性。

查看 DEMO 。

HTML代码

<ul>
    <li id="first">first</li>
    <li id="second"><a href="#first">second</a></li>
    <li class="last"><a href="#second">third</a></li>
</ul>

CSS代码

:target
{
background-color: #e5eecc;
}

Answer 4

这是一个有点hacky但完成工作。一种不同的方法。

li {
    position: relative;
}
li:hover:before {
    content: "";
    display: block;
    background: #F00;
    position: absolute;
    top: -100%;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
li:first-child:hover:before {
    display: none;
}

http://jsfiddle.net/evanbriggs/4wycoksm/1/

Answer 5

我要在悬停时删除下一个兄弟姐妹的样式，以便看起来只有以前的兄弟姐妹在悬停时添加了样式。

ul:hover li {
  color: blue;
}
ul:hover li:hover ~ li{
  color: red;
}

ul li {
  color: red;
}

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

在悬停时更改上一个元素

5 个答案: