How to make <details> drop down on mouse hover

Question

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 1

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

http://jsfiddle.net/vSsc5/1/

Answer 2

Looks like this is a little old, but it also looks like the two answers didn't directly address HTML5 details/summary like you were asking. Unfortunately there's no way to do that in CSS — you could do it for browsers that don't support details/summary, but not for browsers that do support it.

The only way to make this work cross-browser is via JavaScript, sadly. You add the open attribute on mouseover and then remove it on mouseout. Here's a snippet (sorry for the jQuery):

$(function() {
  $('details').on('mouseover', function() {
    $(this).attr('open', true);
  }).on('mouseout', function() {
    $(this).attr('open', false);
  })
});

This doesn't work for keyboard users; you have to get a bit fancy. The details element needs a tabindex="0" attribute so it can be navigated to, and you need to listen for both mouseover/mouseout and focus/blur. Unfortunately Chrome (v37 at least) removes the summary element from the tabbing order when details has a tabindex, and even adding a tabindex to summary doesn't fix that. Weird.

Here's a live example: http://codepen.io/pdaoust/pen/fHybA