Text slide swap on hover using CSS - html

Question

I am trying to achieve what should be a fairly simple CSS transition. I have an address with phone number below. When the phone number is hovered, I want it to slide and fade off to the left, and text ("Call Us") to slide in to take it's place. I have achieved this as shown below, but it is quite glitchy and it's as if you need to hover very precisely for it to work properly. Why is this? Also the phone number isn't centred with the rest of the address (but "Call Us" is when hovered). Thanks for any help.
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

As the previous answers suggest, the <span> element that transitions to the left releases from the scope of :hover once it is no longer under the pointer- causing erratic behavior. My solution involves wrapping the ids in another <span> which gives you a static field to have attributed to the :hover selector.
This might be a redundant answer- but it's different in terms of more succinct organization & it produces your desired result.
#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

Your problem is when you hover and it starts to move,it will go out of under of your mouse. So css hover can not solve your problem.
Use jquery instead:
$('#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');
});
Or if you want to do with css only:
.address p:hover #address1-phone {
margin-left: -200px;
}