センターテキストがホバーに表示されます

Question

テキストホバーに問題があります。 テキストを右側に置くと、カーソルが左側に移動し、グリッチ効果が作成されます。

ホバーを中心にする方法はありますか？

HTML

<div class="adress"> 
    <p class="copy"><span>Text Text Text</span></p> 
</div> 

CSS

p { 
    float: left; /* Important */ 
} 

.copy { 
    cursor: pointer; 
    text-align: center; 
} 

.adress:hover p.copy span { 
    display: none; 
} 

.adress:hover p.copy:after { 
    content: 'Copy'; 
    color: #fff; 
    background: #80bdf7; 
    border-radius: 3px; 
    font-size: 12px; 
    padding: 4px; 
} 

デモ - https://jsfiddle.net/rtzksobr/

Answer 1

私はあなたが削除しないようfloat: leftを与え、重要なている理由を確認していません。それが原因です。

p { 
    float: left; /* Important */ 
    text-align: center; 
    width: 100%; 
} 

スニペット動作する：あなたは本当にfloat: leftが必要な場合は、これを行います。

p { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.copy { 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
.adress:hover p.copy span { 
 
    display: none; 
 
} 
 
.adress:hover p.copy:after { 
 
    content: 'Copy'; 
 
    color: #fff; 
 
    background: #80bdf7; 
 
    border-radius: 3px; 
 
    font-size: 12px; 
 
    padding: 4px; 
 
}

<div class="adress"> 
 
    <p class="copy"><span>Text Text Text</span> 
 
    </p> 
 
</div>

Answer 2

フロートをクリアし、ページに合わせて全幅でのdivブロックを作ってみましょう。これにより、ページ上のdivをテキストの中心に合わせることができます。スパンテキストが配置されている場所の中央にコピーを中央に配置する場合は、スパンとpを同じサイズの幅にすることによって実現できるスパンテキストの幅を幅にすることができます。

p { 
 
    float: left; /* Important */ 
 
} 
 

 
.copy { 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
     
 
.adress:hover p.copy span { 
 
    display: none; 
 
} 
 

 
.adress:hover p { 
 
    clear: left; 
 
    display:block; 
 
    width: 100%; 
 
    text-align:center; 
 

 
} 
 
     
 
.adress:hover p.copy:after { 
 
    content: 'Copy'; 
 
    color: #fff; 
 
    background: #80bdf7; 
 
    border-radius: 3px; 
 
    font-size: 12px; 
 
    padding: 4px; 
 
}

<div class="adress"> 
 
    <p class="copy"><span>Text Text Text</span></p> 
 
</div>