JavaScript を使用しない場合、CSS トランジションは :hover 効果を遅らせることができますか?-CSSチュートリアル-php.cn

JavaScript を使用しない場合、CSS トランジションは :hover 効果を遅らせることができますか?

Mary-Kate Olsen

リリース： 2024-11-29 16:59:10

オリジナル

447 人が閲覧しました

Can CSS Transitions Delay :hover Effects Without JavaScript?

CSS での :hover 効果の遅延

質問:

JavaScript を使用せずに CSS :hover イベントをアクティブにするにはどうすればよいですか?具体的には、ホバー効果を遅延させるための一般的な jQuery プラグインである hoverIntent の機能をシミュレートしながら、これをどのように実現できますか?

回答:

CSS トランジションを利用して遅延させることができます。 :ホバー効果。以下に例を示します。

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

ログイン後にコピー

この例では、要素の上にマウスを置いてから 1 秒経過するまで、要素の背景色は赤に変更されません。

より完全なデモは次のとおりです。これには、ホバーのオンとオフの両方の遅延が含まれます:

div {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ccc;
    transition: 0s background-color;
    transition-delay: 1s;
}
 
div:hover {
    background-color: red;
}

ログイン後にコピー

1	`<div>delayed hover</div>`

ログイン後にコピー

以上がJavaScript を使用しない場合、CSS トランジションは :hover 効果を遅らせることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。