Question

我知道这个解释可能不太好......

嘿，我想过在css上使用onclick的方法，但结果让我感到惊讶。 http://jsfiddle.net/jabZ4/

这就是我所拥有的：

<div class="box">
    <div class="hidden">
        Click to hide!
    </div>
    Click to show!
</div>

看一下HIDDEN div的css：

div.hidden {
    visibility: hidden;
    transition: 999999999999999s;
}

开始时不会显示。此外，过渡非常高，所以它永远不会在以后消失..

非常简单。让我们看看更多css：

div.box:active div.hidden{
    visibility: visible;
    transition: 0s;
}

当我点击BOX div时，可以看到名为HIDDEN的DIV。转换设置为0秒，立即显示。 div永远留在那里。

如果我想隐藏它怎么办？

div.hidden:active {
    visibility: hidden;
        transition: 0s;
}

当我点击'隐藏'元素时，它应该变得不可见，对吗？这是行不通的。我不知道为什么。

我删除了这4行，我尝试了别的东西。

div.hidden:hover {
    visibility: hidden;
        transition: 0s;
}

当我将鼠标悬停在'隐藏'元素上时，它应该变得不可见，对吧？它并不像预期的那样工作。相反，你需要点击它，然后它隐藏。为什么会这样？这对我来说很奇怪。

我完全不知道为什么 1.：悬停在这里活跃起来。 2.：主动完全不起作用。

好奇，有什么想法吗？以下是完整的源代码和查看它的链接： http://jsfiddle.net/jabZ4/

<!DOCTYPE html>
<html>
    <head>
        <style>

html, body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: Helvetica;
    font-size: 12px;
    background-color: #888888;
    width: 100%;
    color: #000000;
}

div.container {
    margin: 200px auto 0px auto;
    padding: 0px 0px 0px 0px;
    width: 370px;
}

div.box {
    line-height: 180px;
    text-align: center;
    color: #FFFFFF;
    width: 180px;
    height: 180px;
    background-color: #222222;
}

div.box:active div.hidden{
    visibility: visible;
    transition: 0s;
}

div.hidden {
    line-height: 180px;
    text-align: center;
    color: #222222;
    position: absolute;
    margin: 0px 0px 0px 190px;
    width: 180px;
    height: 180px;
    background-color: #FFFFFF;
    visibility: hidden;
    transition: 999999999999999s;
}

div.hidden:hover {
    visibility: hidden;
        transition: 0s;
}

        </style>
    </head>
<body>

<div class="container">
    <div class="box">
        <div class="hidden">
            Click to hide!
        </div>
        Click to show!
    </div>
</div>

</body>
</html>

Css Onclick Hack Bug

0 个答案: