Bagaimanakah cara saya menuding pada objek supaya ia hilang dan kemudian objek lain muncul supaya saya boleh mengklik padanya?

Question

Objek pertama saya ialah objek kelas "huruf anjing". Ia mempunyai dua objek kelas "anjing" dan "surat". Saya berjaya menghilangkannya secara berlegar. Objek kedua saya ialah bulatan hitam dengan kelas "hidung anjing". Tetapi saya tidak boleh mengklik pada objek ini selepas ia muncul.

Dikemas kini

Selepas menggunakan z-index:1 objek pertama memberikan konsistensi tetapi saya masih tidak boleh mengklik objek kedua setiap kali. Jika saya menggerakkan kursor sedikit, saya tidak boleh mengklik.

.dog-letter-box {
  border-top: 1px solid #555;
  border-bottom: 2px solid #000000;
  height: 250px;
  width: 100%;
  background: #FEEEEB;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.dog-letter {
  z-index:1;
  margin: 6% auto;
  width: 50px;
  height: 150px;
  background: #00EFFE;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: 50% 40%; 
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
}
.dog {
  width: 50px;
  height: 50px;
  clip-path: circle(40%);
  background: #FFB6C1;
}
.letter {
  width: 50px;
  height: 100px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #FF46C1;
}
.dog-letter:hover + .dog-nose {
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: show-up;
  animation-timing-function: ease;
  
}
.dog-nose {
  margin:10px auto;
  width: 70px;
  height: 70px;
  background: #AFE1AF;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  opacity: 0;
}
.bounce:hover {
    animation-name: bounce-up;
    animation-timing-function: ease;
}
@keyframes bounce-up {
  0%   { transform: translateY(0) scaleY(1) rotateY(0); opacity: 1; }
  100% { transform: translateY(-15px) scaleY(0.2) rotateY(540deg); opacity: 0; }
}
@keyframes show-up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

<div class="dog-letter-box">
  <div class="dog-letter bounce">
      <div class="dog">55</div>
      <div class="letter">66</div>
  </div>
  <a class="dog-nose" href='http://www.google.com'>
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10"/>
</svg>
  </a>
</div>

Answer 1

Kod anda bergantung pada melayang .dog-letter , yang tidak bagus, anda boleh menjalankan animasi semasa melayang kotak yang mengandunginya (.dog-letter, .dog-nose). Saya menggunakan .dog-letter-box, anda boleh menambah div baharu dan meletakkan .dog-letter, .dog-nose di dalamnya.

Selain itu, saya menggunakan pointer-events:none untuk surat anjing selepas melayang, di mana hidung anjing boleh dilegar dan pautan diklik.

.dog-letter-box {
  border-top: 1px solid #555;
  border-bottom: 2px solid #000000;
  height: 250px;
  width: 100%;
  background: #FEEEEB;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.dog-letter {
  z-index:1;
  margin: 6% auto;
  width: 50px;
  height: 150px;
  background: #00EFFE;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: 50% 40%; 
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
}
.dog {
  width: 50px;
  height: 50px;
  clip-path: circle(40%);
  background: #FFB6C1;
}
.letter {
  width: 50px;
  height: 100px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #FF46C1;
}
.dog-letter-box:hover .dog-nose {
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: show-up;
  animation-timing-function: ease;
  
}
.dog-nose {
  margin:10px auto;
  width: 70px;
  height: 70px;
  background: #AFE1AF;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  opacity: 0;
}
.dog-letter-box:hover .bounce {
  animation-name: bounce-up;
  animation-timing-function: ease;
  pointer-events: none;
}
@keyframes bounce-up {
  0%   { transform: translateY(0) scaleY(1) rotateY(0); opacity: 1; }
  100% { transform: translateY(-15px) scaleY(0.2) rotateY(540deg); opacity: 0; }
}
@keyframes show-up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

  

      
55
      
66