Html 使用CSS在悬停时切换文本幻灯片

我试图实现一个相当简单的CSS转换。我有一个地址和下面的电话号码。当手机号码悬停时，我希望它滑到左边并逐渐消失，然后文本（“呼叫我们”）滑入以取代它。如下图所示，我已经实现了这一点，但它非常容易出错，似乎需要非常精确地悬停才能正常工作。为什么会这样？此外，电话号码不以地址的其余部分为中心（但悬停时“呼叫我们”）。谢谢你的帮助

HTML:

---

你的问题是，当你悬停，它开始移动，它会走出你的鼠标。所以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;
  }

---

正如前面的回答所表明的，向左转换的

元素一旦不再位于指针下，就会从

：hover

的范围中释放出来，从而导致不稳定的行为。我的解决方案是将ID包装在另一个

中，这将为您提供一个静态字段，该字段将属性化为

：hover

选择器

这可能是一个多余的答案——但就更简洁的组织而言，它是不同的&它会产生你想要的结果

电话， #地址1电话， #地址1电话文本{ 过渡：0.2s； 光标：指针； 颜色：#009ee3； } #地址1电话{ 位置：相对位置/******/ } #电话：悬停#地址1电话{ 左边距：-200px； 不透明度：0； } #地址1电话文本{ 位置：绝对位置/******/ 左边距：200px； 不透明度：0； } #电话：悬停#地址1电话文本{ 左边距：0； 不透明度：1； }

ASCO运输公司；后勤

阿什比街15号，福里斯特菲尔德

西澳大利亚，6058




+61 (0)8 6254 7400
打电话给我们

谢谢你，马特！很好。没问题，你能解决另一个定位问题吗？是的，我只是在数字上加了一个左边距，然后“呼叫我们”手动将其居中。这是最好的方法吗？怎么样？将address1手机的位置更改为相对位置，将address1手机文本的位置更改为绝对位置。还将

div

包装在一个

标记中，使所有内容都按其应有的方式对齐。

$('#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');
 });  

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