Question

我目前正在处理大学项目的CSS3过渡和动画。

当我点击页面上的链接时，我需要显示div（从opacity:0.5到opacity:1）。

我使用this article中的信息来实现我的目标，但似乎无法使用<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也应该有效）

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

1 个答案: