How to make <details> drop down on mouse hover

html css details

user1868185 · Mar 4, 2013 · Viewed 9.1k times · Source

can anybody help me on how to make the details dropdown on mouse hover using css

This is the html code

<details>
  <summary>Sample</summary>

Details of sample
</details>

I need a css code for it to drop down when the mouse hovers on it can anybody help me on this?

Answer

tepkenvannkorn's solution works, but you do not need to use JavaScript in this case.

HTML

<div id="summary">Sample</div>
<div id="detail">Detail of this summary</div>

(note that summary precedes detail)

CSS

#summary:hover + #detail, #detail:hover {
  display: block;
}
#detail {
  display: none;
}