html - :active and :hover states in IE and Firefox 问题

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 不是问题。