IE 和 Firefox 中 :active 和 :hover 状态的问题

Question

我有一个 CSS 触发覆盖的问题。该解决方案在 Chrome 中运行良好，但在 Firefox 中存在轻微问题，并且在 Internet Explorer 中完全无法使用。

在 Firefox 中，问题在于 :active。我必须按住鼠标按钮 1-2 才能使叠加层保持不变，而在 IE 中它根本不显示。

我的 HTML 标记是这样的：

<a href="#" id="aftermath" title="Mark Nielsen's 3D computer animation project devekoped at Aalborg Media College">                
                <article class="three columns"> 
                    <h1>
                        Aftermath
                    </h1>                                       
                    <img src="images/aftermath-video.jpg"  class="resize" alt="3D computer animation project by Mark Nielsen" />                    
                </article>                                
            </a>

<div class="infobox" id="aftermathinfo">
                <article>
                    <h1>
                        Aftermath
                    </h1>
                    <p class="truncate">This was the result of the "free project" from my stay at Media College Aalborg. Sebastian Baasch and I modelled this from a picture of an old army Jeep and did everything else ourselves. Besides modelling the Jeep and various objects in the landscape I also did all 2D graphics, editing and post effects.</p>
                    <p><a href="posts/aftermath-video.aspx" class="important-link" title="Mark Nielsen's 3D computer animation project devekoped at Aalborg Media College">See and read about the computer animation project here</a></p>
                    <p>&nbsp</p>
                    <p>&nbsp</p>
                    <p><a href="portfolio.aspx" title="Go look at Mark Nielsen's projects, including web page design, graphic design, programming and much more...">Close this window</a></p>
                </article>                
            </div>

以及对应的CSS：

.infobox {
    position:fixed;
    top:0;
    left:0;
    /*margin-left:-300px;*/
    width:100%;
    height:100%;
    background: rgba(0, 0, 0,.75);
    visibility:hidden;
    z-index:9999;
}

    .infobox article {
        text-align:center;
        margin-top:10%;
        padding:5%;
        padding-bottom:20%;
        width:100%;
        background-color:#292929;
        opacity:0.95;
    }

        .infobox article p {
            text-align:center;
        }

        .infobox article h1 {
            border:none;
            margin:2% 0;
            padding:0;
            font-size:1.8em;
        }

    .infobox a.important-link {
        font-size:1.5em;
        /*text-transform:uppercase;
        font-style:normal;*/
    }

.infobox:hover {
    visibility:visible;
}



#aftermath:active + #aftermathinfo {
    visibility:visible;
}

现场版可以看这里：http://balder.ucn.dk/1020613/portfolio.aspx

Answer 1

我怀疑这种行为不是很明确，并且您正在与浏览器的事件顺序作斗争。 （您还可以在关闭覆盖时强制重新加载整个页面，这是次优的。）

尝试改用:target；仅当片段（URL 栏中的#foo）是该元素的 id 时，它才匹配该元素。您所要做的就是将链接更改为<a href="#aftermathinfo">（比# 好得多），并将最后一个选择器更改为#aftermathinfo:target。然后“关闭”链接可以只链接到#，这将清除片段并禁用:target。

不知道它在 IE 中的效果如何，唉。可能只有9+。我看到你使用的是 HTML5 标签，所以希望旧的 IE 不是问题。