如何在悬停HTML上显示很少的描述？

当用户将鼠标悬停在一个 DOM 元素上时，显示一个简短的描述是一种很常用的技巧，特别是在网站设计中。在这篇文章中，我们将介绍如何通过 CSS 和 HTML 来实现悬停描述，而不需要大量的 JavaScript 代码。

使用 "Title" 属性

最常用的方法就是使用 "title" 属性。这个属性可以在任何 HTML 元素中使用，例如：

<a href="https://www.example.com" title="示例网站">访问示例网站</a>

在这个例子中，当用户将鼠标悬停在该链接上时，将显示 "示例网站" 的描述。

使用 CSS :hover 伪类

除了使用 "title" 属性外，还可以使用 CSS 的 ":hover" 伪类来实现悬停描述。这个伪类可以在任何元素上使用，例如：

<button>提交</button>

button:hover::before {
    content: "提交表单";
}

在这个例子中，当用户将鼠标悬停在按钮上时，将会在按钮上方显示 "提交表单" 的描述。需要注意的是，我们使用 "::before" 选择器来将描述添加到元素前面。

使用 CSS Tooltips

除了 ":hover" 伪类外，还可以使用 CSS Tooltips 来实现悬停描述。这种方法需要使用 ":after" 选择器来创建一个包含描述的元素，并使用 "data-attribute" 将描述与原始元素关联起来。例如：

<span class="tooltip" data-title="这是一个示例工具提示">这个元素会有一个描述</span>

/* 创建工具提示 */
.tooltip::after {
    content: attr(data-title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5em;
    background: #333;
    color: #fff;
    font-size: 0.8em;
    border-radius: 0.2em;
    opacity: 0;
    transition: opacity 0.2s;
}

/* 悬停时显示工具提示 */
.tooltip:hover::after {
    opacity: 1;
}

在这个例子中，我们创建了一个包含描述的元素，并将描述存储在 "data-title" 属性中。然后使用 ":after" 选择器来创建一个工具提示，并使用 ":hover" 伪类来控制工具提示的显示和隐藏。

结论

在本文中，我们介绍了三种在悬停 HTML 元素上显示描述的方法。其中，"title" 属性是最简单和最常见的方法；":hover" 伪类和 CSS Tooltips 需要一些额外的 CSS 代码，但它们可以提供更多的自定义选项。无论你使用哪种方法，记得保持描述简短明了，让用户能快速理解该元素的功能。