模拟HTML的title属性

前言

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

实现

我们使用:after选择器来实现这个需求。
index.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">MDNspan>div>
    <div>使用:after模拟,这是<span id="mdn" data-title="mozilla developer network">MDNspan>div>
body>
html>

用浏览器打开就能看到效果。
核心就是当光标hover到元素上时,添加:before或者:after,就能模拟title效果了。
因为项目中有很多添加title的地方,只写一个CSS样式就能满足所有的元素效果,关键点在于

content: attr(data-title);

它是从元素上取对应的属性。

你可能感兴趣的:(模拟HTML的title属性)