隐藏 Safari 中的默认工具提示行为 - CSS

当用户在 Safari 中将鼠标悬停在链接上时, 会自动弹出一个默认工具提示, 显示链接的URL。但是这个默认行为可能会破坏你的网站设计, 或干扰用户浏览你的页面。幸运的是, 你可以使用CSS来隐藏这个默认工具提示行为。

通过以下步骤来隐藏Safari中的默认工具提示行为:

步骤 1

选择链接元素

a{}

步骤 2

添加以下 CSS样式:

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-touch-callout: none; /* 禁用长按链接时的菜单弹窗 */
  -webkit-user-select: none; /* 禁止文本高亮 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移除链接点击时的高亮效果 */
}

步骤 3

为了完全禁用默认的工具提示, 你需要将链接元素上的title 属性设置为空,或者直接不设置title 属性。

a[title], abbr[title] {
  text-decoration: none;
  border-bottom: none;
  cursor: default;
  pointer-events: none;
}

步骤 4

尝试在Safari浏览器中悬停链接,你将不再看到默认的工具提示!

结论

通过使用CSS样式,你可以轻松地隐藏 Safari 中的默认工具提示行为, 使链接更加干净,不会干扰用户的浏览体验。