如何悬停在一个对象上，使其消失，然后另一个对象出现，以便我可以点击它？

Question

我的第一个对象是“dog-letter”类的对象。它有两个类为“狗”和“字母”的对象。我设法让它在悬停后消失。 我的第二个对象是一个带有“狗鼻子”类的黑色圆圈。 但是这个对象出现后我无法点击它。

更新

使用 z-index:1 后，第一个对象给出了一致性，但我仍然无法每次都单击第二个对象。 如果我稍微移动光标一点，就无法单击。

.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