光标显示在 link 下很远

Question

我注意到在我的不同浏览器中有一个奇怪的行为，当我从底部悬停文本 link 时，光标甚至在悬停文本之前就开始显示在 link 下方，大小文本为 85px，行高为 61px。

font-size: 85px;
line-height: 61px;

是不是因为文字太大了？！这是一个例子 https://jsfiddle.net/rcdsqf2e/

我不得不添加一个透明块来避免这种情况，有没有更好的解决方案让光标只出现在link

的区域

Answer 1

正常行为

我认为这是正常行为。 Consider this HTML:

<ul>
  <li><a href="#">Normal link</a></li>
  <li><a href="#">Ag</a></li>
</ul>

当将鼠标悬停在 link 中的字母上时，“行”下方的字母（如书写所在的行）需要有空间，例如小写字母“g”或"y".

潜在修复

至于如何解决您的问题，我认为最好的方法是 use pseudo elements 更改光标。

a {
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  cursor: default;
  
  left: 0;
  bottom: -30%;
  height: 30%;
  width: 100%;
}

更好的修复

我已经编辑了我的消息以分享一个更好的解决方案，因为我对之前分享的那个不满意。只需 add overflow: hidden 到您的“a”标签。

a {
  overflow: hidden;
}

但是，这会切断“书写线”下方的字母，如 above linked example 所示。如果您以后不想剪掉这些字母，您可以删除 overflow: hidden;，或添加填充：

a {
  overflow: hidden;
  padding-bottom: 3%;
}

光标显示在 link 下很远

Cursor showing under link way far

css

frontend

正常行为

潜在修复

更好的修复