Question

 <dl>
    <dt>Term 1</dt>
         <dd>Definition of term 1</dd>
     <dt>Term 2</dt>
        <dd>Definition of term 2</dd>
     <dt> Term3 </dt>
        <dd> Definition of term 3</dd>
</dl>

对于上面的代码，我试图得到它，以便如果我将鼠标悬停在dt部分上，dd部分的背景颜色将变为黑色（或任何颜色）。到目前为止，我只能使悬停部分改变背景颜色，但我不确定如何进行另一部分更改。

Answer 1

您可以使用CSS同级选择器将相同的样式应用于dt和dd，如下所示：

dt:hover,
dt:hover + dd{
    background:#ddd;
}
dd{
    margin-left:0;
    padding-left:20px;/*if you want space, else just leave it*/
}

这是小提琴： http://jsfiddle.net/41222q91/

当然，这只适用于你将鼠标悬停在dt上。由于没有CSS的“上一个同级”选择器，如果你希望当你将鼠标悬停在dd时dt以悬停的样式出现，你将需要JavaScript / jQuery来实现它。在这种情况下，你会发现prev()很有用。

Answer 2

您可以使用onmouseover / onmouseout执行此操作。例如：

<dt onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">

Answer 3

此CSS允许您将鼠标悬停在dt或dd：

上

＆＃13;

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;
}

＆＃13;

<dl>
  <dt>Term 1</dt>
  <dd>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>

＆＃13;

CSS中dl列表的悬停行为

3 个答案: