Question

我指的是这个问题： Hover behavior for a dl list in CSS

接受的答案只会突出显示<dd>之后的第一个<dt>，但当有多个<dd>时，只有第一个（相邻）受影响。

我看过组合器：https://www.w3schools.com/css/css_combinators.asp但是没有一个真正覆盖多个<dd>，因为它们实际上不是<dt>的后代或子元素。

是否存在会影响<dd>之后的所有<dt>的CSS解决方案？

Answer 1

关键点是

/* change color of dd siblings of the hovered dt */
dt:hover ~ dd { 
  color: white;
}

/* set color:initial for dd siblings of dt siblings of the hovered dt */
dt:hover ~ dt ~ dd { 
  color: initial;
}

请查看此片段（我已更新推荐的答案）：

dl {
  overflow: hidden;
}

dt {
  height: 50em;
  margin-bottom: -48.8em;
  background: white;
}

dt:hover {
  background: #333;
  color: white;
}


dd {
  pointer-events: none;
}

dt:hover ~ dd {
  color: white;
}

dt:hover ~ dt ~ dd {
  color: initial;
}

<dl>
  <dt>Term 1</dt>
  <dd>1st Definition of term 1<br>&hellip;<br>&hellip;</dd>
  <dd>2nd Definition of term 1<br>&hellip;<br>&hellip;</dd>
  <dd>3rd Definition of term 1<br>&hellip;<br>&hellip;</dd>
  
  <dt>Term 2</dt>
  <dd>Definition of term 2<br>&hellip;</dd>
  
  <dt>Term3 </dt>
  <dd>Definition of term 3</dd>
</dl>

Answer 2

尝试使用nth-of-type选择器与通用兄弟选择器一起选择dd。

dt:hover,
dt:hover ~ dd:nth-of-type(1),
dt:hover ~ dd:nth-of-type(2), 
dt:hover ~ dd:nth-of-type(3) {
    background:#ddd;
}

CSS中具有多个dds的dt的悬停行为

2 个答案: