CSS3 - 通过单击链接触发 div 的转换

Question

我目前正在为一个大学项目使用 CSS3 过渡和动画。

当我单击页面上的链接时，我需要使div出现（从opacity:0.5到opacity:1）。

我

正在使用本文中找到的信息来实现我的目标，但它似乎不适用于<div>。

这是我的代码：

.CSS

.crea_account{
    position:absolute;
    background-color:#0F0;
    border-radius:5%;
    width:600px;
    height:300px;
    top: 250px;
    right: 135px;
    padding: 10px;
    opacity:0.5;
    -webkit-transition: all 1s ease;
}
:target{
    opacity:1;
}

.HTML

<div class="benvenuto">
        <h1 class="welcome"><a href="#">Benvenuto!</a></h1>
        <h2 class="login cool_link"><a href="#crea_account">Crea il tuo account</a>      oppure <a href="#">Accedi</a></h2>
</div>
<div class="crea_account">
    Some content
</div>

是否有人有任何教程的链接来解释我想获得的内容？谢谢！

Answer 1

如果使用哈希#链接到元素，则必须将目标的id设置为该值。该类根本不影响这一点。

<div id="crea_account" class="crea_account">
    Some content
</div>

每个id在每个文档中都是唯一的。url的哈希部分引用具有给定id的特定元素，这就是浏览器想要跳转到的位置。（如果您使用的是现代浏览器，则:target也应该可以工作）