3

我对 html 中的列表有疑问。

我想要一个基本功能：当用户将鼠标悬停在列表的一个元素上时，它的边框顶部颜色和他的兄弟变为红色；

因此，如果我有这样的 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;
}

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

4

2 回答 2

1

这似乎是一个存在多年的具有多个相邻兄弟姐妹的 Webkit 错误的案例。查看众多报告之一。我在 Firefox 21 和 IE10 中测试没有问题。

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

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

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

于 2013-06-07T15:12:24.863 回答
0

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

dt:hover ~ dt {}

现在它也可以在 Chrome 中使用。

于 2013-06-07T16:26:14.460 回答