[英]Why does display:none doesn't work on Firefox?
I cant get the display:none CSS property to work on Firefox:我无法显示:无 CSS 属性在 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.这个简单的代码适用于 Chrome、Chromium、Edge、Safari,但不适用于 firefox(V73.0),当我使用 ZE0542F579DF8E8138ADE69F8F5310BF2 时,第二个 h1 不会消失
The element is no longer being hovered over when it is set to display: none
since it no longer takes up space.当元素设置为display: none
时,它不再被悬停,因为它不再占用空间。 The element is being hidden in Firefox, but it reappears immediately since it is no longer hoverable when not displayed.该元素被隐藏在 Firefox 中,但它会立即重新出现,因为它在不显示时不再可悬停。
One solution to this problem would be to use opacity
instead.解决此问题的一种方法是使用opacity
。 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>
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.如果想让h1
不再占用空间,可以在后台创建一个div来检测悬停,它必须有一个绝对或固定的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.