問題：活動和：在IE和Firefox懸停狀態

我有一個CSS觸發疊加的問題。該解決方案在Chrome中運行良好，但在Firefox中存在輕微問題，並且在Internet Explorer中完全無法使用。問題：活動和：在IE和Firefox懸停狀態

在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

來源

2013-10-30 Mowinckel

我看不到'：active'僞元素的任何規則。 – matewka

@matewka最後一個。 – Eevee

不要使用活動狀態來使這些元素「可見」，活動狀態只是按下和釋放按鈕之間的時刻。 – DaniP

我懷疑這種行爲是不很好 - 定義和你在與瀏覽器的事件順序作鬥爭。（在關閉疊加層時，您也強制重新加載整個頁面，這是不理想的。）

嘗試使用:target代替;只有當片段（URL欄中的#foo）是該元素的ID時，它才匹配元素。所有你需要做的就是改變你的鏈接<a href="#aftermathinfo">（遠遠好於#），你最後的選擇#aftermathinfo:target。「關閉」鏈接然後可以鏈接到#，這將清除片段並禁用:target。

不知道它在IE中的工作效果如何，唉。可能只有9+。我看到你正在使用HTML5標籤，所以希望舊IE不成問題。

來源

2013-10-30 21:24:51 Eevee

我終於有時間嘗試一下了。它到目前爲止工作很好。不知道：目標，這將在未來幫助我。非常感謝！ – Mowinckel

問題：活動和：在IE和Firefox懸停狀態

回答

相關問題