使用 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">[phone]</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">[phone]</span>
      <span id="address1-phone-text">Call Us</span>
    </span>
  </p>
</div></center>

Answer 2

你的问题是当你悬停并且它开始移动时，它会从你的鼠标下方消失。所以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;
  }