為什么 display:none 在 Firefox 上不起作用？

Question

我無法顯示：無 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>

這個簡單的代碼適用於 Chrome、Chromium、Edge、Safari，但不適用於 firefox（V73.0），當我使用 ZE0542F579DF8E8138ADE69F8F5310BF2 時，第二個 h1 不會消失

Answer 1

當元素設置為display: none時，它不再被懸停，因為它不再占用空間。 該元素被隱藏在 Firefox 中，但它會立即重新出現，因為它在不顯示時不再可懸停。

解決方案 1：標題不可見但占用空間

解決此問題的一種方法是使用opacity 。 這樣元素仍然會占用空間並且可以懸停在上面。

 <.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>

解決方案2：懸停時標題不占用空間

如果想讓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>

為什么 display:none 在 Firefox 上不起作用？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-28 13:56:27

解決方案 1：標題不可見但占用空間

解決方案2：懸停時標題不占用空間

為什么 display:none 在 Firefox 上不起作用？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-28 13:56:27

解決方案 1：標題不可見但占用空間

解決方案2：懸停時標題不占用空間

解決方案1
1 已采納 2020-04-28 13:56:27