僞類：焦點不傳播，現在什麼？

問題：我如何才能使用CSS來使用Tab鍵？（Tabbing已經有效）。僞類：焦點不傳播，現在什麼？

#menu:before { 
 
    content:"Menu \25bc"; 
 
    font-weight:bold; 
 
    width:100%; 
 
} 
 
#menu:hover:before { 
 
    content:"Menu \25b2"; 
 
} 
 
#menu li { 
 
    position:absolute; 
 
    left:-9999px; 
 
} 
 
#menu:hover li { 
 
    position:relative; 
 
    left:0; 
 
}

<html> 
 
    <title>Test</title> 
 
    <body> 
 
    <header> 
 
     <a href="#header1">Link to homepage</a> 
 
    </header> 
 
    <nav> 
 
     <ul id="menu"> 
 
     <li><a href="#menu1">Menu item 1</a></li> 
 
     <li><a href="#menu2">Menu item 2</a></li> 
 
     </ul> 
 
    </nav> 
 
    <main> 
 
     <p>Other text with maybe a <a href="#main1">link here</a>.</p> 
 
    </main> 
 
    </body> 
 
</html>

編輯：原題如下。

我有一個菜單：

<ul id="menu"> 
    <li><a href="#">Menu item 1</a></li> 
    <li><a href="#">Menu item 2</a></li> 
</ul>

不過，我想在一個狹窄的頁面寬度，以隱藏它，所以我申請了下面的CSS：

@media (max-width: 768px) { 
    #menu:before { 
    content:"Menu \25bc"; 
    } 
    #menu:hover:before { 
    content:"Menu \25b2"; 
    } 
    #menu a { 
    position:absolute; 
    left:-9999px; 
    } 
    #menu:hover a { 
    position:relative; 
    left:0px; 
    } 
}

這個隱藏菜單，增加了在它的位置放置單詞「Menu」，具有向下或向上的箭頭，取決於懸停狀態，當你將鼠標懸停在其上時，它也顯示菜單。

問題是，雖然：懸停工作得很好，但我無法通過使用：focus僞類來標記其中一個標籤。（唉，：root不會像其他僞類一樣工作，所以就像我看到的那樣，就像#menu a：focus：root #menu a {position：relative; left：0;}將不起作用）。

有沒有人有任何想法，我怎麼可以這樣做，只使用CSS？還是我挖了一個洞？

來源

2015-07-21 Jezcentral

片段，您可以創建一個小提琴？ – dippas

完成。正如你所看到的，懸停在菜單文本上工作正常。即使您仍然可以選擇鏈接，但我無法將其顯示在頁面上。我在菜單的上方和下方都有鏈接，所以你可以檢查你的標籤。歡迎大家提出意見！ – Jezcentral

你可以使用[：target]（https://developer.mozilla.org/en-US/docs/Web/CSS/%3Atarget）給它一個鏡頭，但你可能需要更改你的html – dippas

基於以下OP評論：

我很高興來改變HTML，但如何將：此目標的工作？

這裏是:target

nav { 
 
    height: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
nav:target { 
 
    height: auto; 
 
} 
 
nav + div a:before { 
 
    content: "Menu \25bc"; 
 
    font-weight: bold; 
 
    width: 100%; 
 
} 
 
nav:target + div a:before { 
 
    content: "Menu \25b2"; 
 
} 
 
nav:target + div .open, 
 
nav + div .close { 
 
    display: none; 
 
} 
 
nav:target + div .close, 
 
nav + div .open { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#menu1">Menu item 1</a> 
 
    </li> 
 
    <li><a href="#menu2">Menu item 2</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div> 
 
    <a class="open" href="#menu"></a> 
 
    <a class="close" href="#"></a> 
 
</div>

來源

2015-07-22 22:25:36 dippas

我會接受這個答案，即使它不可放置。謝謝。 – Jezcentral

我可以完美地選中它..如果你的意思是擊中「Tab」鍵 – dippas

對不起，我的意思是「懸停」。標籤工作正常。我很抱歉。 – Jezcentral

僞類：焦點不傳播，現在什麼？

回答

相關問題