是否有可能使用CSS中的：active选择器显示div点击？ [英] Is it possible to show a div on click using the :active selector in CSS?

问题描述

我想在上显示 div 点击。目标是仅使用纯CSS ，不使用jQuery。

解决方案

）：

---

现在我们想要点击链接。这必须使用CSS中的：active 伪选择器来完成。但是我们如何显示 poup ？我们必须通过链接获取下一个兄弟元素。我们使用CSS中的 + 选择器：

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

查看。如果你添加一些额外的CSS，它可以更时尚。 我创建的类似。

要记住的一些重要注意事项：

• 在最终结果中，链接（蓝色一）和弹出（灰色一）。但事实是，灰色元素不是我们的弹出。它是弹出的一个孩子，我们的弹出框是容器上的100％width和height元素。

正在工作FIDDLE演示

I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.

解决方案

Working FIDDLE Demo

Consider that you want something like this:

---

We write our markup as simple as possible. One element for container, one element for our link and one another element for 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] -->

Here is our layer structure in picture:

---

CONTAINER

Let's write CSS for our container.

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

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

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

• [!] Note that we make our container relative. Because the children will be in absolute mode.

---

LINK

We create our link as an absolute element from left, just as shown in the figure above.

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

---

POPUP

The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.

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

• [!] Note that z-index of popup element must be greater than link element.

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

By now, we'll get this result (check it on jsFiddle):

---

Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:

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

See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none). So we set the :hover rule for the popup and make it block.

.popup:hover {
    display: block;
}

Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link. But it doesn't matter, because we won't set background for our popup (it will be transparent).

---

TEXT

For wanted text in popup element, we set this rules:

.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;
}

Check the jsFiddle demo. Now we have all things that we need.

---

Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):

.popup {
    background: transparent;
}

---

And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.

Some important note to memorize:

• In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.

Working FIDDLE Demo

这篇关于是否有可能使用CSS中的：active选择器显示div点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！