6

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?

Toto
  • 89,455
  • 62
  • 89
  • 125
user1868185
  • 899
  • 3
  • 9
  • 24
  • This help with the main project and also a good solution for some of the this that i need in the site so thanks again and a great learning part for the jquery side.. also anyone else know how to handle the details because the details part is what i need... sorry i changed the comment my friend was also using this account – user1868185 Mar 04 '13 at 02:54
  • @Michael's solution achieves this using pure CSS (albeit without using `
    `).
     – Zaz Nov 04 '16 at 16:28

5 Answers5

7

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/

Michael Theriot
  • 994
  • 7
  • 13
  • thanks again for the additional knowledge for the css in showing the div in functions and for some of your time... also its like the one above but doesn't use jquery but only css thanks.. and but havent seen one of my major concern using this code
    pls note this is html 5 and only chrome supports it and thanks for the comments and solutions that you have given!! and been appreciated     – user1868185 Mar 04 '13 at 05:15
  • You can also continue to use `
    ` with this CSS technique if you want the semantics of it.
     – Zaz Nov 04 '16 at 16:30
  • what about 'click' instead of hover, like a on-off display button? – user466130 Jun 22 '18 at 14:55
  • You can use `:active` but it is akin to a mousedown event rather than a toggle. If you want an on-off display button you could add a hidden input element and adjacent label and style the label like so `:checked + label`. – Michael Theriot Jul 15 '18 at 07:57
  • @MichaelTheriot I have posted a variant solution, closer to the original question. But yours is still useful if we don't mind about toggling 'details' with a 'click'. – allez l'OM Sep 03 '18 at 11:11
4

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

Paul d'Aoust
  • 3,019
  • 1
  • 25
  • 36
2

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.

allez l'OM
  • 547
  • 4
  • 13
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

Tepken Vannkorn
  • 9,648
  • 14
  • 61
  • 86
1

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>
Carson
  • 6,105
  • 2
  • 37
  • 45
  • 1
    Here is another demo I use on my [GitHub page](https://carsonslovoka.github.io/pages-timeline/) – Carson Apr 16 '21 at 07:10