Mein erstes Objekt ist ein Objekt der Klasse „dog-letter“. Es verfügt über zwei Objekte der Klassen „Hund“ und „Buchstabe“. Ich habe es geschafft, es im Schwebeflug verschwinden zu lassen. Mein zweites Objekt ist ein schwarzer Kreis mit der Klasse „Hundenase“. Aber ich kann nicht auf dieses Objekt klicken, nachdem es angezeigt wurde.

Aktualisiert

Nach der Verwendung von z-index:1 sorgt das erste Objekt für Konsistenz, aber ich kann immer noch nicht jedes Mal auf das zweite Objekt klicken. Wenn ich den Cursor ein wenig bewege, kann ich nicht klicken.

.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>