Question

我的html列表存在问题。

我想要一个基本功能：当用户将鼠标悬停在列表的某个元素上时，其border-top-color和他的兄弟会变为红色;

所以，如果我有这样的HTML：

<dl>
  <dt>Example 1</dt>
  <dd>Description 1</dd>

  <dt>Example 2</dt>
  <dd>Description 2</dd>

  <dt>Example 3</dt>
  <dd>Description 3</dd>
</dl>

和CSS：

dd {
    display: none;
}

dt {
    border-top: 1px solid black;
}

dt:last-of-type {
    border-bottom: 1px solid black;
}

dt:hover {
    border-top: 1px solid red;
}

dt:hover:last-of-type {
    border-bottom: 1px solid red;
}

dt:hover + dd + dt {
    border-top: 1px solid red;
}

我没有得到预期的结果。如果我将鼠标悬停在第一个元素上，则只有顶部边框变为红色。如果我将鼠标悬停在第三个元素上，然后在第二个元素上，然后在第一个元素上，边框将变为红色，表示第二个元素和第一个元素，但应该只在最后一个状态上变为第一个。为什么会这样？

Answer 1

这似乎是一个Webkit bug的案例，其中有多个相邻的兄弟姐妹已经存在多年。见one of many reports。我在Firefox 21和IE10中测试没有问题。

Here's Zenith小提琴的修改版本，演示了Chrome / Webkit中一个相邻兄弟选择器的正确行为。我省略了dd并将CSS选择器调整为dt:hover + dt（只是为了演示;当然这没有意义）。

有一些CSS黑客可以解决这个问题，但它们会在某些平台上造成问题。您最好的选择可能是使用不同的方法达到预期的效果。

（对不起，这可能属于您的问题的评论，但我仍然缺乏必要的声誉）

Answer 2

好的，所以我通过添加单行来修复它：

dt:hover ~ dt {}

现在它也适用于Chrome。

列表上的悬停元素的边框

2 个答案: