:target pseudo-class not working properly in firefox

Question

I am making a page with a CSS lightbox-type effect using the :target pseudo-class. When you click on an image, a box pops up with info in it, and goes away again when you click anywhere.

It's working perfectly in Chrome and IE, but in firefox there is a weird bug where the text in my lightbox div disappears when you move the mouse away from the box. It's acting like a hover effect, where you can only see the text when you are hovering over it.

I hope that explanation made sense, please let me know if I was not clear.

My CSS is here:

.lightbox {
display: none;
position: absolute;
z-index: 8;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff; 
padding-left: 30px;
}

.lightbox:target {
/* Show lightbox when it is target */
display: block !important;
outline: none;
}

Let me know if you need more information.

Thank you very much!

Answer 1

The pseudo-class target works on id elements, not classes: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

Try replacing your .lightbox with #lightbox in your CSS, and your HTML element should be <div id="lightbox">

#lightbox {
    display: none;
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff; 
    padding-left: 30px;
}

#lightbox:target {
    /* Show lightbox when it is target */
    display: block !important;
    outline: none;
}