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!
The pseudo-class target works on id elements, not classes: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
Try replacing your .lightbox with #lightbox in your CSS, and your HTML element should be
<div id="lightbox">