Hover Behavior For A Dl List In Css

Term 1

Definition of term 1

Term 2

Definition of term 2

Solution 1:

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.

Solution 2:

You can use onmouseover/onmouseout to do this. For example:

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

Solution 3:

This CSS allows you to hover over the dt or the dd:

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

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