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

Question

我正在尝试实现应该相当简单的 CSS 转换。我有一个地址，下面有 phone 个数字。当 phone 数字悬停时，我希望它向左滑动并淡出，并让文本 ("Call Us") 滑入以取代它。我已经实现了这一点，如下所示，但它很容易出错，就好像你需要非常精确地悬停它才能正常工作。为什么是这样？此外，phone 数字未与地址的其余部分居中（但 "Call Us" 在悬停时居中）。感谢您的帮助。

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

你的问题是当你悬停它开始移动时，它会从你的鼠标下方消失。所以css悬停不能解决你的问题

改用jquery：

$('#address1-phone').mouseenter(function(){
   $(this).css('margin-right', '-200px');
   $(this).next().css('margin-right', '0');
});

$('.address p').mouseleave(function(){
   $(this).children().eq(0).css('margin-right', '0');
 });

或者如果您只想使用 css：

  .address p:hover #address1-phone {
  margin-left: -200px;
  }

Answer 2

正如前面的答案所暗示的那样，向左过渡的 <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>

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

Text slide swap on hover using CSS

html

css

text

transition