HowTo: Show block on anchor hover and click to keep open with CSS
I was looking for a way to show a hidden HTML element with just CSS (no Javascript) when mouse hovers over an anchor (say over a “more…” note), while at the same time also supporting touch-only (no mouse) clients, where clicking should show (and keep open) that same element.
I ended up combining solutions and comments from
https://stackoverflow.com/questions/18849520/css-show-hide-content-with-anchor-name and
https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a#5210074
into
https://jsfiddle.net/birbilis/23nt74se/
Achieved the following behaviour:
- Can hover over an anchor to temporarily show its respective more info block
- Once the info block is open, hovering over that one too (having left the anchor above it) keeps it open (useful to select and copy content from the item)
- Can click on an anchor to show its respective more info block and keep it open. Only one such block is kept open at a time. If multiple exist and you click on another’s anchor, the last one is shown and kept open instead (this doesn’t affect what is temporarily also shown via the hover mechanism).
Notes:
- Could show the item inside the flow or float, e.g. using inline-block instead of block (https://www.w3schools.com/css/css_inline-block.asp)
- I use the :target CSS selector in a bit different way than the original suggestion had, I just set the anchor to jump to itself for easier maintenance of IDs and targets and maintenance-free CSS when adding more targets.
- The anchor with the “openhelp” class must be placed immediately before the item with the help class, since .openhelp:hover + .help is used (https://www.w3schools.com/cssref/sel_element_pluss.asp)
At Trafilm Gallery Metadata forms I ended up using yet another variation with simpler syntax, where the anchor and help text is placed inside a parent div that has text for the item the help is about and that div is marked with class “question”. See https://jsfiddle.net/birbilis/s3kaknt9/ – When the parent questions already have an ID, this has the benefit that you don’t need to add an ID to the anchor, just an href, plus when clicked it scrolls to the parent item (the question) instead of to the help item that is at the bottom of it which would put the question text out of the view when the help link is clicked, if the question is far enough down the page for it to scroll when targetted by the openhelp anchor.
George Birbilis @zoomicon 
George, thanks for this demo. Can the technique be extended (in CSS) so that clicking the ‘button’ (in your example, the ‘[more]’ text) toggles the extra text off and on, while the hover toggle continues to work? Since clicking the second “openhelp” link/ hides the first one’s text again, I’m thinking some tricky CSS might work. Or would I need Javascript/jQuery?
I got as far as this: #1 https://jsfiddle.net/Lprvamsw/ and this: #2 https://jsfiddle.net/bgm4zprv/
These are clunky because they rely on two separate buttons. Also I had to use absolute positioning for the toggled text to keep the text from jumping around depending on the current state (hover or clicked).
So: Do you know a way to get a single link to show/hide text either by hover or by click?
Or: is there a way to get the ‘close’ button to work well when it’s part of the toggled text? In #2 you have to move the mouse outside of the text div after you click the close button before the text vanishes.That’s ok, but not ideal.
Hi, glad you liked it. Regarding the 2nd case, fixed it by adding .question .help {display: none;} before the .question:target .help {display: block;} in the CSS. Btw, in the HTML, don’t use href=”#2″ (a non existent tag id) for the close button, just use “#”. See https://jsfiddle.net/birbilis/oa3hjfbp/8/
Regarding the 1st case, you can’t use a single button to do toggling with that HTML+CSS trick (since it relies on the bookmark visited), unless it is two buttons/prompts one on top of the other but looking identical otherwise. You’d have a rule in the form .question:target .showButton {display: none; } to hide the show button and make the hide one appear in it’s place (the hide one just goes to “#” [to no bookmark]). See https://jsfiddle.net/birbilis/oe1xd6bc/7/ – note that when you click to close sometimes you may do a slight movement which is considered hover and the text may show again confusing the user (although if you then hover out it does go away, aka you stopped the toggling.
One way to fix that last usability / user perception issue is maybe to have a separate hover target and a pin button next to it that toggles permanent visibility when clicked (actually a show and a hide pin that alternate in visibility as in the sample above). UPDATE: TRIED THIS LAST SUGGESTION TOO AT https://jsfiddle.net/birbilis/1fd7pznw/43/ BUT NEEDS SOME BACKGROUND ON THE HELP AREA SO THAT IT DOESN’T HIDE MORE ON HOVER, BUT KEEP UNDERNEATH. DIDN’T FINETUNE THE PLACEMENT OF THE HELP POPUP THOUGH.