悬停显示HTML属性的两种方法

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《悬停显示HTML属性值的两种方法》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本文详细介绍了在HTML元素悬停时显示其自定义属性值（如`ref`属性）的两种主要方法。首先是利用内置的`title`属性实现快速提示，其次是采用CSS的`::after`伪元素创建高度可定制的视觉工具提示。教程涵盖了HTML结构、CSS样式、定位技巧以及`data-*`属性的最佳实践，旨在帮助开发者增强用户界面的交互性。

在网页开发中，有时我们需要在用户将鼠标悬停在特定HTML元素上时，显示该元素的某个自定义属性值，以提供额外的信息或上下文。例如，在一个文本段落中，某些词语可能引用了更长的短语或概念，我们希望在用户悬停在这些词语上时，能够看到它们所引用的内容。本文将探讨两种实现这一功能的有效方法：利用HTML内置的title属性和通过CSS的::after伪元素创建自定义工具提示。

方法一：使用 title 属性（简单快速）

最简单直接的方法是利用HTML元素的title属性。当鼠标悬停在带有title属性的元素上时，浏览器会自动显示一个原生的工具提示，其内容就是title属性的值。

优点：

• 实现极其简单，无需额外CSS或JavaScript。
• 浏览器原生支持，兼容性好。

缺点：

• 工具提示的样式无法自定义，外观取决于浏览器和操作系统。
• 功能受限，不能实现复杂的交互或动画效果。

实现方式： 要使用title属性，只需将自定义属性的值复制到title属性中。如果你的HTML结构允许，可以直接在后端或前端脚本中进行转换。

<p id="IP08">
    Uneven development is, precisely that: capitalist
    factors (firms, industries, countries) have a common trait, but
    <span title="capitalist factors (firms, industries, countries)">they</span> show uneven unfolding and cannot be individually
    predicted. Since the factors are mutually and interdependently
    related, the general trend that we define as the law of uneven
    development can be inferred from <span title="capitalist factors
    (firms, industries, countries)">their</span> relationship, which
    has a specific connotation, i.e., the difference in the paces of
    the factors that make up the relationship itself. Since the general
    trend is determined by capitalism’s nature, <span title="the general
    trend">it</span> cannot change without changing the nature of
    capitalism itself.
</p>

将ref属性替换为title属性后，悬停时浏览器将显示默认的工具提示。

方法二：使用 CSS ::after 伪元素创建自定义工具提示（灵活可控）

如果需要自定义工具提示的样式、位置或动画效果，使用CSS的::after伪元素是更强大的选择。这种方法允许我们完全控制工具提示的视觉呈现。

核心思路：

1. 为目标元素设置position: relative;，以便其::after伪元素可以相对其自身进行定位。
2. 使用::after伪元素来创建工具提示的内容区域。
3. 通过content: attr(attribute_name);获取并显示自定义属性的值。
4. 利用CSS定位、样式和opacity、visibility属性结合:hover伪类来实现悬停显示和隐藏效果。

HTML 结构： 我们将使用原始的HTML结构，其中元素带有ref自定义属性。

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

CSS 实现：

/* 为带有 ref 属性的 span 元素设置相对定位，这是伪元素定位的基础 */
span[ref] {
    position: relative;
    /* 可选：为了视觉效果，可以添加下划线或不同颜色来指示可交互 */
    /* text-decoration: underline dotted; */
    /* cursor: help; */
}

/* 默认状态下隐藏工具提示 */
span[ref]:after {
    content: attr(ref); /* 获取并显示 ref 属性的值 */
    background-color: #00adb5; /* 背景色 */
    color: #fff; /* 文字颜色 */
    position: absolute; /* 绝对定位 */
    padding: 1px 5px 2px 5px; /* 内边距 */
    top: 100%; /* 定位在 span 元素的下方 */
    left: 0px; /* 从 span 元素的左侧开始 */
    white-space: nowrap; /* 防止文本换行 */
    opacity: 0; /* 默认透明度为0，隐藏 */
    box-shadow: 3px 3px 5px #00ADB5; /* 阴影效果 */
    border: 1px solid rgb(197, 195, 195); /* 边框 */
    border-radius: 0 5px 0 5px; /* 圆角 */
    visibility: hidden; /* 默认不可见 */
    z-index: 20; /* 确保工具提示在其他内容之上 */
    transition: all 0.1s ease .5s; /* 添加过渡效果，延迟0.5秒显示 */
}

/* 鼠标悬停时显示工具提示 */
span[ref]:hover:after {
    opacity: 1; /* 透明度变为1，显示 */
    visibility: visible; /* 可见 */
    /* 可以添加动画效果，如下面的 @keyframes grow */
    /* animation: grow 3s forwards; */
}

/* 这是一个可选的动画，用于工具提示的出现和消失效果 */
@keyframes grow {
    0% {
        transform: scale(0);
    }
    30%, 65% {
        transform: scale(1);
    }
    70%, 100% {
        transform: scale(0);
    }
}

代码解析：

• span[ref] { position: relative; }: 这是关键一步，它将span元素设置为定位上下文，使得其::after伪元素可以相对于它进行绝对定位。
• span[ref]:after { ... }: 定义了工具提示的默认样式和隐藏状态。
  • content: attr(ref);: 这是获取ref属性值的核心。attr()函数可以直接读取元素的属性值并作为伪元素的内容。
  • position: absolute;: 使伪元素脱离文档流，可以精确地定位。
  • top: 100%; left: 0px;: 将工具提示定位在span元素的正下方。
  • opacity: 0; visibility: hidden;: 默认情况下，工具提示是完全透明且不可见的。
  • transition: all 0.1s ease .5s;: 为所有属性变化添加平滑过渡，并设置0.5秒的延迟，避免鼠标快速划过时闪烁。
• span[ref]:hover:after { ... }: 当鼠标悬停在span元素上时，改变::after伪元素的opacity和visibility，使其显示出来。
• @keyframes grow { ... }: 这是一个可选的CSS动画示例，它使工具提示在出现时有一个缩放效果。如果不需要动画，可以移除animation属性。

自定义属性的最佳实践 (data-* 属性)

在HTML5中，为了更好地管理自定义属性并确保HTML的有效性，推荐使用data-*前缀来命名自定义属性。例如，将ref改为data-ref。

HTML 结构（使用 data-ref）：

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span data-ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span data-ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span data-ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

CSS 相应调整：

只需将CSS选择器和attr()函数中的ref改为data-ref即可。

span[data-ref] { /* 选择器改为 data-ref */
    position: relative;
}

span[data-ref]:after { /* content: attr() 也改为 data-ref */
    content: attr(data-ref);
    /* ... 其他样式不变 ... */
}

span[data-ref]:hover:after {
    /* ... 样式不变 ... */
}

注意事项

1. 定位与溢出： 自定义工具提示的position: absolute;使其脱离文档流，因此需要仔细考虑其在页面边缘时的定位。如果工具提示内容过长或靠近屏幕边缘，可能会溢出。可以通过调整left、right、top、bottom属性或使用JavaScript动态计算位置来优化。
2. 可访问性 (Accessibility)：
   • title属性通常被屏幕阅读器支持，但自定义工具提示可能需要额外的ARIA属性（如aria-describedby或aria-labelledby）来确保对所有用户都可访问。
   • 对于非装饰性、传达重要信息的工具提示，应考虑键盘可访问性，例如使用Tab键聚焦时也能显示。
3. 性能： 过多的或过于复杂的CSS动画可能会影响页面性能，尤其是在旧设备上。适度使用动画，并确保其平滑。
4. JavaScript 替代方案： 对于更复杂的工具提示需求（如动态内容加载、与后端交互、更精细的定位控制），通常会结合JavaScript库（如Popper.js）或自定义脚本来实现。

总结

在HTML元素悬停时显示自定义属性值，可以根据需求选择不同的方法。对于简单的、无需自定义样式的提示，title属性是最佳选择。而对于需要高度定制外观、定位和交互效果的场景，使用CSS的::after伪元素配合content: attr()提供了一个强大且灵活的解决方案。同时，遵循data-*自定义属性的最佳实践，能够确保HTML代码的有效性和语义化。

到这里，我们也就讲完了《悬停显示HTML属性的两种方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！