CSSを使用してホバー上のテキストスライドスワップ

Question

私はかなり簡単なCSSの移行を達成しようとしています。私は以下の電話番号の住所を持っています。電話番号が上がっているときは、スライドして左にフェードアウトし、テキスト（「Call Us」）をスライドインしてその場所に移動します。私はこれを以下に示すように達成しましたが、それは非常に不思議で、正しく動作するためには非常に正確にホバーする必要があるかのようです。どうしてこれなの？また、電話番号はアドレスの残りの部分に中央揃えされていません（ただし、「お電話」はホバーされています）。助けてくれてありがとう。

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>にIDをラップして、: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のホバーはあなたの問題を解決することはできません。代わりに

使用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; 
    }