私の最初のオブジェクトは、クラス「dog-letter」のオブジェクトです。これには、クラス「dog」と「letter」の 2 つのオブジェクトがあります。ホバーすると消えるようにすることができました。 2 番目のオブジェクトは、「犬の鼻」クラスの黒い円です。 しかし、このオブジェクトが表示された後はクリックできません。
更新
z-index:1 を使用した後、最初のオブジェクトには一貫性が得られますが、2 番目のオブジェクトを毎回クリックすることはできません。
カーソルを少し動かしてもクリックできません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
あなたのコードは .dog-letter のホバリングに依存していますが、これは良くありません。それらを含むボックス (.dog-letter、.dog-nose) をホバリングするとアニメーションを実行できます。 私は .dog-letter-box を使用しています。新しい div を追加して、その中に .dog-letter、.dog-nose を入れることができます。
さらに、ホバリング後の犬の文字に pointer-events:none を使用しています。犬の鼻にホバリングしてリンクをクリックすることができます。