html - 列表悬停元素上的边框

Question

我对 html 中的列表有疑问。

我想要一个基本的功能:当用户将鼠标悬停在列表的某个元素上时，它的 border-top-color 和他的 sibling 变为红色；

所以如果我有这样的 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

这似乎是一个存在多年的具有多个相邻 sibling 的 Webkit 错误。参见 one of many reports .我在 Firefox 21 和 IE10 中测试没有问题。

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

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

(抱歉，这可能属于您问题的评论，但我仍然缺乏所需的声誉)