僞類保持對焦點的div可見/主動？

我有一個div，直到用戶點擊一個鏈接是隱藏的。顯示使用a:active + div選擇器的div。然後我有div:active, div:focus保持div可見。僞類保持對焦點的div可見/主動？

雖然使得DIV看起來是很簡單，保持明顯的是我有問題。如果我點擊DIV（取主動關閉的鏈接，並把焦點/活躍在DIV），那麼DIV再次消失。

我試過使用div:hover，雖然它顯示div（即使在我點擊它之後），當我關閉div時仍然消失。爲什麼:active和:focus沒有被應用到我的div？

2012-07-31 Richard Parnaby-King

你可以採取不同的方法，使用:target僞類來代替。要說明這一點，最好的辦法是用一個例子：

#box { 
 
    display: none; 
 
} 
 
#box:target { 
 
    display: block; 
 
}

<a href="#box">Open</a> <a href="#">Close</a> 
 

 
<div id="box">content</div>

警告，我不知道是什麼瀏覽器支持像這樣的例子。它適用於我的Chrome版本。

來源

2012-07-31 09:41:17

爲什麼是：active和：focus未應用於我的div？

因爲:active和:focus有一些限制：

6.6.1.2。用戶操作僞類：懸停，：活動和：焦點

交互式用戶代理有時會根據用戶操作更改呈現。選擇器爲用戶選擇的元素提供了三個僞類。

:active僞類適用於元素被用戶激活的情況。例如，在用戶按下鼠標按鈕並釋放它的時間之間。在具有多個鼠標按鈕的系統上，：活動僅適用於主或主激活按鈕（通常是「左」鼠標按鈕）及其任何別名。

:focus僞類適用於元素具有焦點（接受鍵盤或鼠標事件或其他形式的輸入）。

可能有文檔語言或實現特定的限制，元素可能變爲:active或獲取:focus。

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

甲<div>沒有任何形式的輸入（<textare>，<input>，...）或以其它方式interactive element（如<a>，<audio>，<video>）。這只是一個容器。 :focus和:active都不會被應用。

使用:target而不是suggested by Casey。

來源

2012-07-31 09:44:58 Zeta

上下文是一個包含子菜單的菜單，我希望在點擊相關菜單時顯示子菜單，並在點擊鏈接時顯示它。（和你很相似）。

HTML標記：

<nav> 
    <ul> 
     <li> 
      <a href="#" > 
      </a> 
      <div> 
       <ul> 
        <li> 
         <a href="/sites/p1.php">submenu link1</a></li> 
        <li> 
         <a href="/sites/p2.php">submenu link2</a></li> 
        <li> 
         <a href="/sites/p3.php">submenu link3</a></li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</nav>

對於Firefox & Chrome網絡瀏覽器，我personnally使用：

nav > ul > li > a:focus + div, nav > ul > li > a + div:active { 
    display : block; 
}

中的第一選擇引用我的鏈接錨，以獲得其子秀時被點擊/標籤選擇。第二個是，當你點擊一個鏈接（它不斷顯示活動div）時，讓子菜單div保持打開狀態。

這對我很好，但不適合IE不幸。

來源

2015-02-03 08:47:31 Alex

僞類保持對焦點的div可見/主動？

回答

相關問題