Using only CSS, show div on hover over

Question

I would like to show a div when someone hovers over an element, but I would like to do this in CSS and not JavaScript. Do you know how this can be ach

Answer 1

Based on the main answer, this is an example, useful to display an information tooltip when clicking on a ? near a link:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

Delete all obsolete informations?
All data older than 2 weeks will be deleted.