是否可以使用CSS中的：active選擇器顯示單擊div？

Question

我想在click顯示div 。 目標是僅使用純CSS ，不使用jQuery。

Answer 1

工作FIDDLE演示

考慮一下你想要這樣的東西：

---

我們盡可能簡單地編寫標記。 container一個元素， link一個元素和popup另一個元素：

<!-- [container] -->
<div class="link-with-popup">

    <!-- link -->
    <div class="link">CSS</div>

    <!-- [popup] -->
    <div class="popup">
        <div class="box">CSS Description</div>
    </div>
    <!-- [/popup] -->

</div>
<!-- [/container] -->

這是我們的圖層結構：

---

容器

讓我們為我們的容器編寫CSS。

.link-with-popup {
    /* for visualizing */
    background: yellow;

    /* we need relative, because childs are absolute */
    position: relative;

    margin-bottom: 10px;
    height: 30px;
    width: 400px;
}

• [!]請注意，我們使容器relative 。 因為孩子將處於absolute模式。

---

鏈接

我們從左側創建link作為絕對元素，如上圖所示。

.link {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
}

---

彈出

popup元素的維數與容器相同 ，因此我們將所有top ， left ， right ， bottom屬性設置為0 。

.popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: green;
        z-index: 20;
    }

• [!]請注意， popup元素的z-index必須大於link元素。

.popup {
        /* we won't show the popup yet */
        display: none;
}

到現在為止 ，我們將得到這個結果（ 在jsFiddle上查看 ）：

---

現在我們想click我們的鏈接。 這必須使用:active CSS中的:active偽選擇器。 但是我們必須如何展示poup ？ 我們必須通過link獲得下一個兄弟元素。 我們在CSS中使用+選擇器：

.link:active + .popup {
    display: block;
}

在jsFiddle上查看結果。 但問題是，當用戶意識到鼠標時，彈出窗口將消失（因為它display為none ）。 因此我們為popup設置:hover規則並使其block 。

.popup:hover {
    display: block;
}

查看jsFiddle演示 。 現在我們足夠接近了。 popup元素唯一的問題， 隱藏我們的link 。 但這沒關系，因為我們不會為popup設置background （它將是transparent ）。

---

文本

對於popup元素中的有用text ，我們設置了以下規則：

.popup .box {
    position: absolute;

    /* note that we make a gap from left to don't hide the link */
    left: 130px;
    top: 0;
    right: 0;
    bottom: 0;
    background: #505050;
}

查看jsFiddle演示 。 現在我們擁有了所需的一切。

---

現在是時候讓我們的popup元素transparent （通過將background設置為transparent或簡單地刪除background: green;規則）：

.popup {
    background: transparent;
}

---

這是最終的jsFiddle結果 。 如果你添加一些額外的CSS，它可以更時尚。 我創造了這樣的東西。

記住一些重要的注意事項：

• 在最終結果中， link （藍色）和popup （灰色）之間存在間隙。 但事實是灰色元素不是我們的popup 。 它是popup的子項，我們的彈出窗口是容器上的100％寬度和高度元素。

工作FIDDLE演示

Answer 2

另一種方法是使用：target屬性（僅適用於現代瀏覽器）。

這是一個qucik DEMO ，我通過應用opacity: 0;隱藏div opacity: 0; 當你點擊鏈接時，div變為opacity: 1; 使用url中的哈希匹配鏈接和div。

這是我的例子中的代碼。

HTML

<a href="#pop">Click me</a>
<br />
<div id="pop"></div>

CSS

#pop {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 0;
}

#pop:target {
  opacity: 1;
}

但是有一些副作用。 瀏覽器會跳轉/向下滾動（不確定是否可以防止這種情況？）到匹配的div，因為我們在url中使用哈希值會影響瀏覽器歷史記錄，如上所述，它只適用於現代瀏覽器。

編輯如果你想查看純CSS單擊事件的其他黑客/技巧，這是一個很好的帖子 - http://tympanus.net/codrops/2012/12/17/css-click-events/