Question

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

这是一个代码笔，展示了我遇到的问题：

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

HTML

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

CSS

＆＃13;

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

＆＃13;

Answer 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>

当鼠标位于元素边缘时，悬停状态会快速闪烁

1 个答案: