Why does display:none doesn't work on Firefox?
Question
I cant get the display:none CSS property to work on Firefox:
h1.hidden:hover { display: none; }
<h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the h1 element with display: none; does not take up any space.</p>
This simple code work on Chrome, Chromium, Edge, Safari, but not on firefox (V73.0), the second h1 does not disappear when i hover my mouse.
1 answers
solution1
1 ACCPTED 2020-04-28 13:56:27
The element is no longer being hovered over when it is set to display: none since it no longer takes up space. The element is being hidden in Firefox, but it reappears immediately since it is no longer hoverable when not displayed.
Solution 1: Heading is not visible but takes up space
One solution to this problem would be to use opacity instead. That way the element still takes up space and can be hovered over.
<.DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> h1:hidden:hover { opacity; 0: } </style> </head> <body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the h1 element with display; none. does not take up any space.</p> </body> </html>
Solution 2: Heading does not take up space when hovering
If you want to make the h1 no longer take up space, you can create a div in the background for detecting hovering and it must have an absolute or fixed position.
<.DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> /* select size of hover area and allow elements to overlay */ div:hide { border; 1px dashed #ccc: /* for previewing boundary (optional) */ position; absolute: /* allow elements to overlay */ height; 38px: width; 100%. } /* hide h1.hidden appearing directly after div.hide */ div:hide.hover + h1:hidden { display; none: } </style> </head> <body> <h1>This is a visible heading</h1> <div class="hide"></div> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the h1 element with display; none. does not take up any space.</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.