Kedmasterk Kedmasterk - 2 months ago 11
CSS Question

Hover state flickers rapidly when mouse is on edge of element

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

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>