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

最新推荐文章于 2024-08-24 20:56:51 发布

爱上的云

最新推荐文章于 2024-08-24 20:56:51 发布

阅读量2.1w

点赞数 4

本文链接：https://blog.csdn.net/dong123ohyes/article/details/115509351

版权

本文介绍了两种使用HTML和CSS实现鼠标悬停效果的方法。第一种利用`<abbr>`标签的`title`属性在鼠标悬停时显示额外信息。第二种方法通过CSS的`:hover`伪类和`display`属性控制元素的显示与隐藏，实现了悬停时显示隐藏内容的效果。同时，文章还提及了CSS伪类在不同IE版本的兼容性问题。

摘要由CSDN通过智能技术生成

参考：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>