Question

我正在努力实现一个相当简单的CSS过渡。我的地址下面有电话号码。当电话号码悬停时，我希望它向左滑动并淡出，然后文字（＆＃34; Call Us＆＃34;）滑入以取得它的位置。我已经实现了如下所示的这一点，但它非常微不足道，它就像你需要非常精确地悬停才能正常工作。为什么是这样？此外，电话号码不是以地址的其余部分为中心（但是＆＃34;呼叫我们＆＃34;是在悬停时）。谢谢你的帮助。

HTML：

pylint: disable=no-member

CSS：

<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>

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悬停时文本幻灯片交换

2 个答案: