html - 使用 CSS 悬停时文本滑动交换

Question

我正在尝试实现应该是相当简单的 CSS 过渡。我有一个地址和下面的电话号码。当电话号码悬停时，我希望它向左滑动并淡出，然后将文本(“调用我们”)滑入以取代它。我已经实现了这一点，如下所示，但它很容易出错，就好像你需要非常精确地悬停它才能正常工作。为什么是这样？此外，电话号码未与地址的其余部分居中(但悬停时显示“调用我们”)。感谢您的帮助。

HTML:

<div class="address">
    <p><b>ASCO TRANSPORT &AMP; LOGISTICS</b><br>
    15 Ashby Close, Forrestfield<br>
    Western Australia, 6058<br></p>
    <p><span id="address1-phone">+61 (0)8 6254 7400</span><span id="address1-phone-text">Call Us</span></p>
</div>

CSS:

#address1-phone, #address1-phone-text {
  transition: 0.2s;
  cursor: pointer;
  color: #009ee3;
}

#address1-phone:hover {
  margin-left: -200px;
  opacity: 0;
}

#address1-phone-text {
  margin-right: -200px;
  opacity: 0;
}

#address1-phone:hover + #address1-phone-text {
  margin-right: 0px;
  opacity: 1;
}

Answer 1

正如前面的答案所暗示的那样，<span>向左过渡的元素从 :hover 的范围释放一旦它不再处于指针之下，就会导致不稳定的行为。我的解决方案涉及将 ID 包装在另一个 <span> 中这给你一个静态字段归因于 :hover选择器。

这可能是一个多余的答案 - 但它在更简洁的组织方面有所不同并且它会产生您想要的结果。

#phone,
#address1-phone,
#address1-phone-text {
  transition: 0.2s;
  cursor: pointer;
  color: #009ee3;
}

#address1-phone {
  position: relative; /******/
}

#phone:hover #address1-phone {
  margin-left: -200px;
  opacity: 0;
}

#address1-phone-text {
  position: absolute; /******/
  margin-left: 200px;
  opacity: 0;
}

#phone:hover #address1-phone-text {
  margin-left: 0;
  opacity: 1;
}

<center><div class="address">
  <p>
    <b>ASCO TRANSPORT &AMP; LOGISTICS</b>
    <br> 15 Ashby Close, Forrestfield
    <br> Western Australia, 6058
    <br>
  </p>
  <p>
    <span id="phone">
      <span id="address1-phone">+61 (0)8 6254 7400</span>
      <span id="address1-phone-text">Call Us</span>
    </span>
  </p>
</div></center>