jquery实现简单文字提示效果

实现简单文字提示效果主要需要使用jQuery的hover()方法和CSS样式。下面是实现的完整攻略：

第一步：引入jQuery库

在HTML文件中引入jQuery库。可以通过以下代码引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

第二步：创建HTML元素

在HTML文件中创建需要简单文字提示效果的HTML元素，例如：

<a href="#" class="tooltip" data-text="这是提示文本">鼠标移上来</a>

第三步：编写CSS样式

在CSS文件中编写tooltip的样式，例如：

.tooltip {
  position: relative;
  color: #000;
  text-decoration: none;
}

.tooltip:before {
  content: "";
  display: none;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  padding: 7px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 3px;
  z-index: 999;
}

.tooltip:hover:before {
  display: block;
}

第四步：编写jQuery代码

使用hover()方法，为需要提示效果的元素添加鼠标移入和移出事件，并获取提示文本，例如：

$(document).ready(function() {
  $(".tooltip").hover(
    function() {
      var text = $(this).data("text");
      $(this).attr("data-text", "");
      $(this).siblings(".tooltip:before").text(text);
    },
    function() {
      var text = $(this).siblings(".tooltip:before").text();
      $(this).attr("data-text", text);
      $(this).siblings(".tooltip:before").text("");
    }
  );
});

示例说明一

下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现简单文字提示效果</title>
  <style>
    .tooltip {
      position: relative;
      color: #000;
      text-decoration: none;
    }

    .tooltip:before {
      content: "";
      display: none;
      position: absolute;
      top: -40px;
      left: 50%;
      margin-left: -70px;
      width: 140px;
      padding: 7px;
      background-color: #000;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 1.4;
      border-radius: 3px;
      z-index: 999;
    }

    .tooltip:hover:before {
      display: block;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".tooltip").hover(
        function() {
          var text = $(this).data("text");
          $(this).attr("data-text", "");
          $(this).siblings(".tooltip:before").text(text);
        },
        function() {
          var text = $(this).siblings(".tooltip:before").text();
          $(this).attr("data-text", text);
          $(this).siblings(".tooltip:before").text("");
        }
      );
    });
  </script>
</head>
<body>
  <a href="#" class="tooltip" data-text="这是提示1">鼠标移上来1</a>，
  <a href="#" class="tooltip" data-text="这是提示2">鼠标移上来2</a>
</body>
</html>

示例说明二

下面是另一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现简单文字提示效果</title>
  <style>
    .tooltip {
      position: relative;
      color: #000;
      text-decoration: none;
    }

    .tooltip:before {
      content: "";
      display: none;
      position: absolute;
      top: -40px;
      left: 50%;
      margin-left: -70px;
      width: 140px;
      padding: 7px;
      background-color: #000;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 1.4;
      border-radius: 3px;
      z-index: 999;
    }

    .tooltip:hover:before {
      display: block;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".tooltip").hover(
        function() {
          var text = $(this).text().replace(/\s+/g, "");
          $(this).text("");
          $(this).siblings(".tooltip:before").text(text);
        },
        function() {
          var text = $(this).siblings(".tooltip:before").text();
          $(this).text(text);
          $(this).siblings(".tooltip:before").text("");
        }
      );
    });
  </script>
</head>
<body>
  <p>鼠标移上来会显示文字提示。</p>
  <p>
    用英文单词<a href="#" class="tooltip">JavaScript</a>来<span class="tooltip" data-text="互联网上最常见的前端语言之一">解释</span>这个效果。
  </p>
</body>
</html>

这个示例的要点是可以使用jQuery的text()方法来获取和设置元素的文本内容，用于提示文本的data-text属性只需要在HTML元素中添加即可，例如:

<a href="#" class="tooltip" data-text="这是提示文本">鼠标移上来</a>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单文字提示效果 - Python技术站