Текстовый слайд swap при наведении с помощью 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">+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

Как предыдущих ответы предполагают, то <span> элемента, который переходит в левых выпуски из сферы :hover, когда он больше не находится под указателем, вызывая неустойчивое поведение. Мое решение включает в себя обертывание идентификаторов в другом <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>

Answer 2

Ваша проблема при наведении курсора, и она начинает двигаться, он будет выходить из под вашей мыши. Таким образом, css hover не может решить вашу проблему.

Использование 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; 
    }