Wie fahre ich mit der Maus über ein Objekt, damit es verschwindet und dann ein anderes Objekt erscheint, damit ich darauf klicken kann?

Question

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>

Answer 1

您的代码依赖于悬停 .dog-letter ，这不好，您可以在悬停包含它们的框（.dog-letter，.dog-nose）时运行动画。 我用的是.dog-letter-box，你可以添加一个新的div并将.dog-letter,.dog-nose放入其中。

此外，我在悬停后使用pointer-events:none 作为狗字母，可以悬停狗鼻子并单击链接。

.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