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?
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
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; } 
<details> with this CSS technique if you want the semantics of it.
: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.
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:
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.
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/[email protected]/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>
document.addEventListener('DOMContentLoaded', function() { const detailsElements = document.querySelectorAll('details'); detailsElements.forEach(function(details) { details.addEventListener('mouseover', function() { this.setAttribute('open', 'true'); }); details.addEventListener('mouseout', function() { this.removeAttribute('open'); }); }); }); 
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
<details>).