Question

我用这个虫子把头发撕掉了，所以非常感谢任何帮助。如果你去小提琴，我们会看到当你将鼠标悬停在按钮上时它会缩放，但是当这种情况发生时，文字就会模糊。我已经尝试了各种方法来解决这个问题，但感觉我已经陷入了兔子洞！谢谢:)

我希望文本在悬停时或在转换时不会模糊。

Ps，我在Chrome上工作。

＆＃13;

.btn {
  padding: 10px 20px;
  background: red;
  color: white;
  transition: all 300ms ease;
  display: inline-block;
}

.btn:hover {
  transform: scale(1.1);
}

＆＃13;

<div class="btn">Button Text</div>

＆＃13;

Answer 1

问题与规模有关。

你可以用这个CSS完成同样的事情，但没有＆＃34;模糊＆＃34;你得到的效果：

https://jsfiddle.net/y9jv7o3r/

.btn:hover { 
margin-top: -5px; 
margin-left: -5px; 
padding: 15px 25px; 
font-size: 18px; 
}

Answer 2

通常，由于字体渲染，不同的> match(data.frame(a), data.frame(b)) [1] 1 1效果会出现这些“模糊”问题，我怀疑是否存在简单的修复...但是，如果不使用transform，可以轻松实现所需的效果，保持简单：transform，font-size和padding;保持简单。

对于可访问性而言，这样做也很有用，因为Firefox和Opera不支持缩放。

文本模糊悬停与规模转换元素

2 个答案: