CSS中dl列表的悬停行为

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()在这种情况下很有用.