: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

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

#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;
}

0 讨论(0)

发布评论:

提交评论

---

•  加载中...