html 鼠标移到元素上显示一段工具提示文本

参考：https://zhidao.baidu.com/question/2010707923470635268.html

1、方法一，利用html特性，每个标签都有一个title属性。当鼠标hover在该标签内容上时，浏览器展示出该标签的title内容，让鼠标移走，内容消失

<abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<p title="Free Web tutorials">W3School.com.cn</p>

2、方法二，利用css的伪类hover，以及显示隐藏属性display，来实现如下：

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>Document</title>
  <style>
    .continer {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }

    .continer div {
      display: none;      /*默认隐藏*/
    }

    .continer:hover div {
      display: initial;      /*当鼠标hover时展示*/
    }
  </style>
</head>

<body>
  <div class="continer">
    文字内容文字内容
    <div>我是鼠标悬停展示的内容</div>
  </div>
</body>

3.CSS伪类兼容性

IE6、IE7只支持锚伪类（a:link、a:visited、a:hover、a:active）；
IE8可支持:focus、:first-child、:lang 伪类，但需要加<!DOCTYPE>；
IE9+可支持大部分伪类选择器。

//IE 7-11都支持
//chrome v89（其他版本没测）支持

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>Document</title>
  <style>
    .continer {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }

    .continer {
      display: initial;
      /*默认隐藏*/
    }

    .continer:hover {
      display: none;
      /*当鼠标hover时展示*/
    }    
  </style>
</head>

<body>
  <a class="continer">
    文字内容文字内容
    <div>我是鼠标悬停展示的内容</div>
  </a>
</body>

//IE 7-11都支持
//chrome v89（其他版本没测）支持

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>Document</title>
  <style>
    .continer {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }

    .continer {
      display: initial;
      /*默认隐藏*/
    }

    .continer:hover {
      display: none;
      /*当鼠标hover时展示*/
    }

    .continer div {
      display: none;
      /*默认隐藏*/
    }

    .continer:hover div {
      display: initial;
      /*当鼠标hover时展示*/
    }
  </style>
</head>

<body>
  <a class="continer">
    文字内容文字内容
    <div>我是鼠标悬停展示的内容</div>
  </a>
</body>

//IE 7-11都支持
//chrome v89（其他版本没测）支持

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>Document</title>
  <style>
    .continer {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }

    .continer {
      display: initial;
      /*默认隐藏*/
    }

    .continer:hover {
      display: initial;
      /*当鼠标hover时展示*/
    }

    .continer div {
      display: initial;
      /*默认隐藏*/
    }

    .continer:hover div {
      display: none;
      /*当鼠标hover时展示*/
    }
  </style>
</head>

<body>
  <div class="continer">
    文字内容文字内容
    <div>我是鼠标悬停展示的内容</div>
  </div>
</body>

html 鼠标移到元素上显示一段工具提示文本

悦读