マウスが要素の端にくると、ホバー状態が急激にちらつく

Question

ボタンのように見えるようにアンカータグを作成しました。要素の上にマウスを置くと、その人の名前は最初と最後の頭字語の略語に変わります。私のマウスが要素の端にくると、ホバーは急速にちらつき始め、効果の滑らかさが損なわれます。

http://codepen.io/kedarjoyner/pen/JRYRxa

HTML

<a target="_blank" href="#">A<span>aron</span> Y<span>onda</span></a> 

CSS

a { 
 
    text-decoration: none; 
 
    color: #231f20; 
 
    font-weight: 600; 
 
    border: 2px solid #231f20; 
 
    width: 100px; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 

 
a:hover span { 
 
    display: none; 
 
} 
 

 
a:hover { 
 
color: orange; 
 
transition: .2s; 
 
border-color: orange; 
 
transition: .2s; 
 
width: 50px; 
 
}

Answer 1

ここに解決策があります：

は、ここに私がいる問題を実証codepenです。 divでラップし、アンカーの代わりにdivでホバーをターゲットにします。

body { 
 
    font-family: Helvetical, Arial, sans-serif; 
 
} 
 

 
.name-logo { 
 
    margin-top: 20px; 
 
} 
 

 
.name-logo a { 
 
    text-decoration: none; 
 
    color: #231f20; 
 
    font-weight: 600; 
 
    border: 2px solid #231f20; 
 
    padding: 10px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.name-logo:hover a { 
 
    color: orange; 
 
    border-color: orange; 
 
} 
 

 
.name-logo:hover a span { 
 
    display: none; 
 
} 
 

 

<div class="name-logo"> 
 
    <a target="_blank" href="#">A<span>aron</span> Y<span>onda</span></a> 
 
</div>