像jQuery的.click（）一樣工作的CSS3選擇器？

Question

我使用純CSS導航已有幾年了，最近我們開始在我工作的公司中建立大量的移動網站。 我真的很想繼續使用純CSS，並注意依賴jQuery，但是在移動網站上，下拉菜單無法正常工作。

是否有與jQuery的.click();類似的東西.click(); CSS3中發生事件？ 基本上，當用戶單擊導航鏈接時，我希望下拉列表保持打開狀態。 我曾嘗試環顧四周，但似乎找不到任何東西。

Answer 1

您可以使用:target選擇器來實現一些基本功能。 請參閱Chris Coyier的相關文章 。 注意， 瀏覽器支持 。

編輯：快速演示

Answer 2

給定一些基本的HTML結構，您可以重新創建JavaScript實現的切換（顯示/隱藏）功能：

使用:target ：

HTML：

<nav id="nav">
    <h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>

CSS：

nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
nav:target {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS小提琴演示 。

使用:checked ：

HTML：

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

CSS：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    cursor: pointer;
}

JS小提琴演示 。

不幸的是，最接近的替代天然CSS有，在“ :clicked ”選擇器是:active或:focus偽類，一旦鼠標按鈕被釋放，其中將停止，以匹配所述第一選擇器，其中第二個將停止一旦給定元素不再聚焦（通過鍵盤或鼠標聚焦在文檔中的其他位置），則匹配。

更新了演示，以允許切換label文本（使用CSS生成的內容）：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS小提琴演示 。

參考文獻：

• :checked （ 兼容性 ）。
• :target （ 兼容性 ）。

Answer 3

嘗試:active psuedo-class。 它不是完全防彈的，但是您應該至少能夠從中獲得一些基本功能。

Answer 4

在您的CSS代碼中嘗試類似的操作...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }