4

具有html带有多个哈希链接（例如href="#login"）的代码和使用伪选择器:target进行动画的 css，例如

#login:target ~ #wrapper #console {
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    animation-name: scaleOut;
}

我想根据触发事件的“来源”添加条件行为功能。

让我们说html代码

<a class="hidden" id="login"></a>
<div id="wrapper">
  <div id="console" class="animate">
...

某处还有两个链接

<a id="link_1" href="#login">

和

<a id="link_2" href="#login">

都指向#login. 是否可以修改css为每个链接具有不同的行为？就我而言，是否可以通过纯html和css为两个链接制作不同类型的动画？

4

2 回答 2

0

正如您所问的那样，这是不可能的，因为 CSS 无法有条件地评估活动的来源，并且只能对最终结果做出“反应”，而无法引用动作的来源这“导致”:target选择器匹配。

也就是说，如果您能够更改您的 HTML 和其中一个链接，您可以对其进行近似：

    <a id="link_1" href="#hidden">Link One</a>

    <a id="link_2" href="#login">Link Two</a>

    <div id="hidden"></div>
    <a class="hidden" id="login"></a>

    <div id="wrapper">
        <div id="console" class="animate">
    </div>

You can target differently:

#hidden:target + #login {
    /* style, or trigger animation */
}

#login:target {
    /* style, or trigger different animation */
}

当然，问题在于这显然不会直接导致:target选择器在两种情况下都匹配相关元素，所以答案必须保留，基本上：“不”，这是 JavaScript 可能是唯一真正的情况满足您的需求的解决方案。

于 2013-10-01T23:22:42.100 回答
0

No.:target是其类型中唯一的 CSS 选择器；对于任何其他“行为”，您需要 JavaScript 或服务器端的东西。

你能得到的最接近的是#login1and #login2。

于 2013-10-01T23:19:25.727 回答