CSS悬停和元素重叠问题

Question

这是我想在我的网站上使用的带有按钮的 codepen 链接： https://codepen.io/nikolett_codes/pen/BMmOxO

这里是 HTML 代码：

<div class="phone cta">Call us</div>
<div class="phone number">[phone]</div>

问题：

假设“OP”是.cta 原始位置，“NP”是.cta 新位置。 令人恼火的是，如果您将鼠标悬停在 cta 元素上，然后将光标移到它上面（在 NP 处），动画不会中断。悬停，当您将鼠标悬停在 OP 上时，当 .cta div 处于 NP 时（因此基本上悬停在 .number div 上）它会中断并返回到 OP。 我该如何处理？

一种方法是将鼠标悬停在 .number 上时进行转换，但由于 z-index，这是不可能的，因此动画永远不会开始。 我想另一种方法是获取 .number 位置并将事件监听器应用于该区域？ 处理这个问题的最佳方法是什么？

Answer 1

解决这个问题的一种方法是将 .phone.cta 和 .phone.number div 包装在一个容器 div 中，并将 :hover 伪类应用于容器而不是 .phone.cta div。

<div class="phone-container">
  <div class="phone cta">Call us</div>
  <div class="phone number">[phone]</div>
</div>

并将其添加到 css 中：

.phone-container {
      position: relative;
   }
    
   .number {
      z-index: 0;
      position: relative;
   }
   .phone-container:hover .cta {
      transform: translateX(-80%);
      transition: 1.2s;
   }