模拟HTML的title属性

最新推荐文章于 2025-04-11 20:44:27 发布

kylin_zdd1993

最新推荐文章于 2025-04-11 20:44:27 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/82667512

版权

前言

HTML的title属性，用于显示关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本。title属性很有用，但是缺点也显而易见，鼠标移动到元素上，需要过一段时间才能显示，但是有些情况下需要鼠标移动到元素上立刻就能显示出提示文本。

实现

我们使用:after选择器来实现这个需求。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用:after模拟title属性</title>
    <style type="text/css">
        #mdn:hover::after {
            content: attr(data-title);
            position: relative;
            bottom: -15px;
            left: -10px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            background-color: #ccc;
            color: #000;
        }
    </style>
</head>
<body>
    <div>使用HTML原生的title属性，这是<span title="mozilla developer network">MDN</span></div>
    <div>使用:after模拟，这是<span id="mdn" data-title="mozilla developer network">MDN</span></div>
</body>
</html>