개체 위로 마우스를 가져가면 해당 개체가 사라지고 다른 개체가 나타나서 클릭할 수 있게 하려면 어떻게 해야 합니까?

Question

나의 첫 번째 개체는 "dog-letter" 클래스의 개체입니다. 여기에는 "dog" 클래스와 "letter" 클래스의 두 개체가 있습니다. 호버에서 사라지게 만들었습니다. 두 번째 개체는 "개 코" 클래스가 있는 검은색 원입니다. 하지만 이 개체가 나타난 후에는 클릭할 수 없습니다.

업데이트

사용 후 z-index:1 첫 번째 개체는 일관성을 제공하지만 여전히 매번 두 번째 개체를 클릭할 수 없습니다. 커서를 조금만 움직여도 클릭이 안되네요.

으아아아 으아아아

Answer 1

귀하의 코드는 .dog-letter 호버링에 의존하는데 이는 좋지 않습니다. 해당 코드가 포함된 상자(.dog-letter, .dog-nose)를 호버링하면 애니메이션을 실행할 수 있습니다. 저는 .dog-letter-box를 사용하고 있습니다. 새 div를 추가하고 그 안에 .dog-letter, .dog-nose를 넣을 수 있습니다.

또한 호버링 후 개 문자에 대해 포인터 이벤트:없음을 사용하고 있습니다. 여기서는 개 코를 호버링하고 링크를 클릭할 수 있습니다.

으아아아 으아아아