简体   繁体   English

为什么 display:none 在 Firefox 上不起作用?

[英]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 中,但它会立即重新出现,因为它在不显示时不再可悬停。

Solution 1: Heading is not visible but takes up space解决方案 1:标题不可见但占用空间

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>

Solution 2: Heading does not take up space when hovering解决方案2:悬停时标题不占用空间

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM