0

JavaScript でのみ可能かもしれませんが、CSS だけで :focus や :hover などのイベントを使用して、あるスタイルを別のスタイルにリンクできるかどうか疑問に思っていました。

たとえば、クラス「hitArea」は、フォーカスがあるときに「changeArea」の背景属性を変更できますか?

.changeArea { background: yellow; }
.hitArea div:focus { changeArea:changeBG; }
.changeArea changeBG { background: blue; }

この作業例のように、CSS アニメーションを実行するときにスタイル間に通信があることを私は知っています:

.reveal {
    position:absolute;
    top:190px;
    left:0px;
    margin-left:0px;

    -webkit-animation-name:reveal;
    -webkit-animation-duration:0.1s;
    -webkit-animation-fill-mode:backwards;
    -webkit-animation-delay:0.2s;

    animation-name:reveal;
    animation-duration:0.1s;
    animation-fill-mode:backwards;
    animation-delay:0.2s;
}

@-webkit-keyframes reveal {
    0%  { left:-900px; -webkit-animation-timing-function:linear;  }
    99%     { left:-900px; -webkit-animation-timing-function:linear; }
    100%    { left:0px; }
}

では、他のスタイル間で通信するための構文は何ですか、それとも可能ですか?

4

3 に答える 3

1

HTML が次のようになっている場合:

<div class="hitarea">
    <div class="changeArea"></div>
</div>

次に、次のように hitArea がフォーカスされているときに changeArea をターゲットにすることができます。

.hitarea:focus .changeArea {
    background-color: red;
}

これは、「changeArea」が hitarea の子である場合にのみ機能します。

CSS セレクターとその機能について詳しくは、https ://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors をご覧ください。

于 2013-04-04T20:04:04.257 に答える