Hover state flickers rapidly when mouse is on edge of element

Question

I've created an anchor tag to appear like a button. When I hover over the element, the person's name transitions into just an acronym of their first and last name. When my mouse is just on the edge of the element, the hover starts to rapidly flicker ruining the smoothness of the effect.

Here's a codepen demonstrating the issue I'm having:

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

Here's the solution. Wrap the button with a div and target the hover on the div instead of the anchor.

 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>