Hover behavior for a dl list in CSS

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>

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.

possible duplicate of [Is there a previous sibling selector?](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) — elixenide, Apr 12 '15 at 17:00
The way the question is asked, there's nothing about the previous siblings, only the next. `dt:hover + dd` seems to do exactly what you need. — Touffy, Apr 12 '15 at 17:05

score 5 · Answer 1 · answered Apr 12 '15 at 16:53

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.

score 0 · Answer 2 · edited Apr 12 '15 at 17:13

0

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

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

edited Apr 12 '15 at 17:13

atiquratik

1,296
3
27
34

answered Apr 12 '15 at 16:38

Always Learning

5,510
2
17
34

Rick Hitchcock · Answer 3 · 2015-04-12T18:58:10.490

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>

Hover behavior for a dl list in CSS

3 Answers3

Linked