悬停行为在CSS中的dl列表 [英] Hover behavior for a dl list in CSS

问题描述

 < dl> 
< dt> Term 1< / dt> 
< dd>术语1的定义< / dd> 
< dt> Term 2< / dt> 
< dd>术语2的定义< / dd> 
< dt> Term3< / dt> 
< dd>术语3的定义< / dd> 
< / dl> 
  

对于上面的代码，我试图弄明白，如果我将鼠标悬停在dt部分，dd部分的背景色变为黑色（或任何颜色）。到目前为止，我只能够让悬停的部分改变背景颜色，但我不知道如何进行另一部分更改。

解决方案

：hover，
dt：hover + dd {
background：#ddd;
}
dd {
margin-left：0;
padding-left：20px; / *如果你想要空间，否则就放弃它* /
}

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

当然，这只适用于悬停在dt上的情况。由于没有用于CSS的'以前的兄弟'选择器，如果您希望dt在悬停在dd上时以悬停样式显示，则需要使用JavaScript / jQuery来实现。很可能，您会发现 prev（）在这种情况下很有用。

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

For the above code, I'm trying to get it so that if I hover over the dt portion, the background color for the dd portion changes to black(or any color). So far, I've only been able to get the hovered portion to change background color, but I'm not sure how to make another part change.

解决方案

You can apply the same style to both dt and dd using CSS sibling selectors as below :

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

And here's the fiddle : http://jsfiddle.net/41222q91/

Of course, this only works if you hover on dt. Since there's no 'previous sibling' selector for CSS, if you want dt to appear with hovered style when you hover on dd, you will need JavaScript / jQuery to achieve that. Chances are, you will find prev() useful in that case.

这篇关于悬停行为在CSS中的dl列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！