当鼠标在元素边缘时，悬停状态快速闪烁答案

【问题标题】：Hover state flickers rapidly when mouse is on edge of element当鼠标在元素边缘时，悬停状态快速闪烁
【发布时间】：2016-09-12 17:53:40
【问题描述】：

我创建了一个看起来像按钮的锚标记。当我将鼠标悬停在元素上时，此人的姓名将转换为他们的名字和姓氏的首字母缩写词。当我的鼠标刚好在元素的边缘时，悬停开始快速闪烁，破坏了效果的平滑度。

这是一个演示我遇到的问题的代码笔：

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

【问题讨论】：

这是因为您同时有 2 个悬停状态。取出一个：hover span，你不需要
感谢您的快速回复！我试过了，但是我无法隐藏字母来将徽标变成首字母缩写词。
我也尝试将这些跨度字母作为伪类添加和删除，但这也没有改善问题。
@Kedmasterk 请点击左侧的灰色复选标记图标接受下面发布的答案。
@herrh 谢谢！您是否知道为什么定位 div 而不是定位标记？

标签： html css hover

【解决方案1】：

这是解决方案。用 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>

【讨论】：