JavaScript を使用せずに CSS で :hover 効果を遅らせるにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript を使用せずに CSS で :hover 効果を遅らせるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-26 15:38:09

オリジナル

376 人が閲覧しました

How Can I Delay :hover Effects in CSS Without JavaScript?

CSS での :hover 効果の遅延

JavaScript を使用せずに :hover イベントを遅延できますか?

CSS でホバー効果の適用を遅らせることができます。

トランジションを使用して :hover エフェクトを遅延させる方法:

次の CSS コードを考えてみましょう:

div {
    transition: 0s background-color;
}

div:hover {
    background-color: red;
    transition-delay: 1s;
}

ログイン後にコピー

この例では、遷移遅延プロパティは 1 秒に設定されます。これにより、:hover 状態に入ったときに背景色の変更が 1 秒遅れます。

例:

<div>delayed hover</div>

ログイン後にコピー

視覚的なデモンストレーション:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

ログイン後にコピー

}
div:hover {

background-color: red;

ログイン後にコピー

}

このデモでは、背景色の変更に対する遅延ホバー効果。トランジションを利用して遅延ホバー効果を実現する方法を示します。 CSS。

以上がJavaScript を使用せずに CSS で :hover 効果を遅らせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。