鼠标悬停提示

最新推荐文章于 2024-07-13 19:38:58 发布

jackleeonlyone

最新推荐文章于 2024-07-13 19:38:58 发布

阅读量532

点赞数 11

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/jackleeonlyone/article/details/136691032

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .tooltip .tooltip-text {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 100%;
      transform: translate(-10px, -50%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .tooltip .tooltip-text::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent #000;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
  </style>
  <title>CSS Tooltip Example</title>
</head>
<body>
  <span class="tooltip">
    鼠标悬停在我上面
    <span class="tooltip-text">这是一个提示信息</span>
  </span>
</body>
</html>