Question

我遇到了css触发覆盖的问题。该解决方案在Chrome中运行得稍微好一点，但在Firefox中存在轻微问题，并且在Internet Explorer中完全无法使用。

在Firefox中，问题在于：活跃。我必须按住鼠标按钮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不是问题。

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

1 个答案: