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

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

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

Answer 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

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

1. you cannot permanently have the 'details' open (a mouseover is not a mousedown),
2. 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.

Answer 5

I have a timeline list that is also implemented with details.

I want the mouse to move over it to automatically expand it and close it automatically when it moves to an unrelated area.

Here is my code

// auto-open-details.js

function getDetails(mouseEvent) {
  let target = mouseEvent.target
  if (target.tagName === 'SUMMARY') {
    target = target.parentNode
  }
  if (target.tagName !== 'DETAILS') {
    return  // Using return without a value will return the value undefined.
  }
  return target
}


(
  ()=>{
    const detailsCollection = document.getElementsByTagName('details')

    for (let [key, details] of Object.entries(detailsCollection)){
      details.onmouseover = (mouseEvent) => {
        const target = getDetails(mouseEvent)
        if (typeof target != "undefined") {
          target.open = true
        }
      }   
    }
    
    document.addEventListener('mouseover', (mouseEvent)=>{
      for (let [key, details] of Object.entries(detailsCollection)){
        if (details.matches(':hover')){
           return // Don't use "continue" since its subelement needs to show.
        }
        details.open = false
      }
    })  
  }
)();

<!DOCTYPE html>
<head>
  <!-- Bootstrap is not necessary. I just want to make the example look better. -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- <script defer src="auto-open-details.js"></script> -->
</head>

<article class="row">
  <section class="col-md-4 offset-md-1">
    <details>
      <summary>2021 <small class="text-muted">(5)</small></summary>
      <details>
        <summary>04 <small class="text-muted">(3)</small></summary>
        <ul>
          <li>
            <div>
              <a href="#">Post 1</a>
              <small class="text-muted">
                <time>2021-04-15</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Post 2</a>
              <small class="text-muted">
                <time>2021-04-12</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Post 3</a>
              <small class="text-muted">
                <time>2021-04-01</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
      <details>
        <summary>03 <small class="text-muted">(2)</small></summary>
        <ul>
          <li>
            <div>
              <a>Request</a>
              <small class="text-muted">
                <time>2021-03-30</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Ajax</a>
              <small class="text-muted">
                <time>2021-03-29</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
    </details>
  </section>
  <section class="col-md-4 offset-md-1">
    <details>
      <summary>2020 <small class="text-muted">(2)</small></summary>
      <details>
        <summary>12 <small class="text-muted">(1)</small></summary>
        <ul>
          <li>
            <div>
              <a>Post 1</a>
              <small class="text-muted">
                <time>2021-12-15</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
      <details>
        <summary>11 <small class="text-muted">(1)</small></summary>
        <ul>
          <li>
            <div>
              <a>Post 2</a>
              <small class="text-muted">
                <time>2021-11-29</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
    </details>
  </section>
</article>