CODEWITHSUNDEEP
htmlcssfirefox
bardamu
bardamu

Reputation: 23

Why does display:none doesn't work on Firefox?

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.

Upvotes: 2

Views: 1202

Answers (1)

DenverCoder1
DenverCoder1

Reputation: 2501

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>

Upvotes: 1

Related Questions