4

html複数のハッシュ リンク (例: )を含むコードと、アニメーション用のhref="#login"疑似セレクターを使用する css を持つ。:target

#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">
...

どこかに2つのリンクもあります

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

と

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

どちらも を指してい#loginます。cssリンクごとに異なる動作をするように変更することは可能ですか? 私の場合、両方のリンクに対して純粋htmlでcss異なる種類のアニメーションを実行することは可能ですか?

4

2 に答える 2

0

CSS にはアクティビティのソースを条件付きで評価する機能がなく、アクションのソースを参照する機能がなく、最終結果に「反応」することしかできないため、これは不可能です。:targetセレクターを一致させる「原因」 。

とはいえ、HTML とリンクの 1 つを変更できる場合は、次のように近似できます。

    <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もちろん、問題は、どちらの場合もセレクターが関連する要素に直接一致するわけではないことは明らかであるため、基本的に「いいえ」という答えを残す必要があります。あなたのニーズを満たすソリューション。

于 2013-10-01T23:22:42.100 に答える