jquery 鼠标悬浮显示文字

原创

mob64ca12ecb6c5 2023-10-31 03:10:23 ©著作权

文章标签 jQuery ci 事件处理 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ecb6c5的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 鼠标悬浮显示文字

引言

在网页设计中，鼠标悬浮显示文字是一种常见的交互效果，通过这种效果可以提供额外的信息或者提示给用户。jQuery是一种流行的JavaScript库，提供了很多简化DOM操作的方法，使得开发者可以更加方便地实现各种交互效果。

本文将介绍如何使用jQuery来实现鼠标悬浮显示文字的效果，并提供代码示例进行演示。

实现原理

要实现鼠标悬浮显示文字的效果，需要监听鼠标的悬浮事件，并在事件触发时修改相应元素的文本内容或样式。具体步骤如下：

使用jQuery选择器选取目标元素。
使用.hover()方法监听鼠标悬浮事件。
在事件处理函数中修改相应元素的文本内容或样式。

实例演示

下面我们来看一个具体的实例，假设我们有一个图片列表，希望鼠标悬浮在每张图片上时显示图片的标题。

HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>鼠标悬浮显示文字</title>
  <style>
    .image-item {
      position: relative;
      display: inline-block;
      margin: 10px;
    }
    .image-title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 5px;
      margin: 0;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .image-item:hover .image-title {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="image-item">
    <img src="image1.jpg">
    <p class="image-title">图片1</p>
  </div>
  <div class="image-item">
    <img src="image2.jpg">
    <p class="image-title">图片2</p>
  </div>
  <div class="image-item">
    <img src="image3.jpg">
    <p class="image-title">图片3</p>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

在这个示例中，我们首先定义了一个.image-item的CSS类，用于设置图片列表项的样式。其中.image-title是图片的标题，初始状态下设置了透明度为0，鼠标悬浮时透明度变为1，实现了渐变显示的效果。

JavaScript代码

$(document).ready(function() {
  $('.image-item').hover(
    function() {
      $(this).find('.image-title').text($(this).find('img').attr('alt'));
    },
    function() {
      $(this).find('.image-title').text('');
    }
  );
});

在上面的代码中，我们使用了.hover()方法监听.image-item元素的鼠标悬浮事件。在事件处理函数中，我们使用$(this)来获取当前的.image-item元素，然后使用.find()方法选取该元素内部的.image-title元素，使用.text()方法修改其文本内容。

在鼠标悬浮时，我们将.image-title的文本内容设置为对应图片的alt属性值，鼠标移开时将文本内容清空。