How to make drop down on mouse hover

问题

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?

回答1:

Try this:

HTML:

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

CSS:

#summary {
    background: #666;
    width: 100px;
    color: #fff;
}

#summary:hover {
    cursor: pointer;
    color: #fff200;
}

#detail {
    width: 300px;
    height: 300px;
    background: #fff200;
    display: none;
}

JavaScript:

$(document).ready( function() {
    $('#summary').hover( function() {
        $('#detail').toggle();
    });
});

See my jsfidle here

回答2:

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/

回答3:

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

回答4:

Here is a (variant of Theriot) solution, closer to the original question "How to make <'details'> drop down on mouse hover". See comments inside HTML.

HTML

  <details open>
      <summary>Title</summary>
      <div id="uniqueDetailsDiv">
Be sure to set the attribute 'open' within the 'details' element, and use a 'div' or another tag
to support a unique 'class' or 'id' name such as 'uniqueDetailsDiv'
      </div>
  </details>

CSS

#uniqueDetailsDiv
  {display: none;}
details:hover #uniqueDetailsDiv
  {display: block;}

There are two drawbacks with that solution:

you cannot permanently have the 'details' open (a mouseover is not a mousedown),
it conflicts with the behaviour of the 'click' on the summary (one click permanently hide the details, click twice to re-establish the 'hover' behaviour)

but the question didn't require anything special with the 'click' (sort of alternative to it). This alternative may be useful on desktops. With touch-screen devices, the regular 'details' behaviour is probably better.

来源：https://stackoverflow.com/questions/15193606/how-to-make-details-drop-down-on-mouse-hover

标签

html

css

html5

details