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

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;
}

<div>delayed hover</div>

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