使用 CSS 光标来显示外部链接的图标

主要观点:介绍如何知道链接指向何处及改善用户体验的方法,包括通过鼠标悬停显示目的地、使用 CSS 改变光标图标、利用 favicon 等,同时探讨了这种做法的优缺点。
关键信息:

  • 在桌面端鼠标悬停可显示链接目的地,极客可查看页面源代码。
  • CSS 可改变光标图标,有内置图标和自定义图像文件两种方式。
  • 大多数网站有 favicon,可通过 DuckDuckGo 服务获取。
  • 可将 CSS 与链接内联使用来改变光标图标。
    重要细节:
  • CSS 代码示例如#link { cursor: url("/path/to/image.png"), auto; }
  • DuckDuckGo 服务获取 favicon 的链接如https://icons.duckduckgo.com/ip9/google.com.ico
  • HTML 内联 CSS 改变链接光标的示例 <a href="https://google.com/" style='cursor:url("https://icons.duckduckgo.com/ip9/google.com.ico"), auto;' >Visit this website</a>!
  • 探讨了这种做法的优缺点,如对有很多链接的情况有用、并非通用 UI 模式可能致用户困惑、在移动端不适用、可能存在安全问题等。
阅读 28
0 条评论