オブジェクトの上にカーソルを置くとオブジェクトが消え、別のオブジェクトが表示されてクリックできるようにするにはどうすればよいですか?

Question

私の最初のオブジェクトは、クラス「dog-letter」のオブジェクトです。これには、クラス「dog」と「letter」の 2 つのオブジェクトがあります。ホバーすると消えるようにすることができました。 2 番目のオブジェクトは、「犬の鼻」クラスの黒い円です。 しかし、このオブジェクトが表示された後はクリックできません。

更新

z-index:1 を使用した後、最初のオブジェクトには一貫性が得られますが、2 番目のオブジェクトを毎回クリックすることはできません。 カーソルを少し動かしてもクリックできません。

リーリー リーリー

Answer 1

あなたのコードは .dog-letter のホバリングに依存していますが、これは良くありません。それらを含むボックス (.dog-letter、.dog-nose) をホバリングするとアニメーションを実行できます。 私は .dog-letter-box を使用しています。新しい div を追加して、その中に .dog-letter、.dog-nose を入れることができます。

さらに、ホバリング後の犬の文字に pointer-events:none を使用しています。犬の鼻にホバリングしてリンクをクリックすることができます。

リーリー リーリー