html - 如何在 html 代码中使用 CSS 选择 Back & Next 元素

Question

我有这个 HTML 代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

例如：当<li>4</li>鼠标悬停时 > <li>3</li>&<li>5</li>设置样式...

例如：当<li>2</li>鼠标悬停时。<li>1</li>&<li>3</li>设置样式...

可以在不使用 Jquery 的情况下做到这一点吗？纳克斯

Answer 1

您可以使用+选择器选择下一个元素：

li:hover + li {
    background-color: red;
}

前一个元素没有选择器。

编辑：这是一种类似于gvee's answer 的方法。

Answer 2

我想我可能已经在纯 CSS 中破解了这个……它确实包含一些技巧来扭转z-index我不喜欢的自然状态，但它可以解决问题。

理论是这样的：你为 设置一个固定的高度，li并给它一个border-top-width相同的值。然后，您可以将列表项“堆叠”在一个和另一个之上，以便顶部边框可以“假装”为上述项目的背景。

够呛，让我们展示一下代码......

JSFiddle：http: //jsfiddle.net/gvee/Awjmp/

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

* {
    margin: 0;
    border: 0;
    padding:0;
}
ul {
    width: 200px;
    border: 1px solid black;
    list-style-type: none;
    background-color: #eee;
    margin: 10px;
    overflow: hidden;
    /* stop the first item's border bursting the container */
}
li {
    height: 20px;
    border-top-width: 20px;
    /* li.height */
    border-top-style: solid;
    border-top-color: #eee;
    /* ul.background-color */
    position: relative;
    margin-top: -20px;
    /* -li.height */
}
li:hover {
    background-color: red;
    /* "current" colour */
    border-top-color: yellow;
    /* "previous" colour */
}
li:hover + li {
    background-color: lime;
    /* "next" colour */
}
/* HACK... reverse the natural z-index */
 li:nth-child(9) {
    z-index: 1
}
li:nth-child(8) {
    z-index: 2
}
li:nth-child(7) {
    z-index: 3
}
li:nth-child(6) {
    z-index: 4
}
li:nth-child(5) {
    z-index: 5
}
li:nth-child(4) {
    z-index: 6
}
li:nth-child(3) {
    z-index: 7
}
li:nth-child(2) {
    z-index: 8
}
li:nth-child(1) {
    z-index: 9
}

Answer 3

JSFiddle：http: //jsfiddle.net/gvee/q6QS5/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

li:hover
{
    background-color: red;
}

li:hover + li
{
    background-color: lime;
}

.previous
{
    background-color: blue;
}

jQuery

这是突出显示“上一个”项目所必需的

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