首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Jquery将鼠标悬停在2张图片上

可以通过以下步骤实现:

  1. 首先,在HTML文件中引入Jquery库,可以通过以下代码在<head>标签中添加:
代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
  1. 在HTML文件中添加两张图片的<img>标签,并为它们设置一个共同的类名,例如"hover-image"。同时,为每张图片设置一个唯一的id,例如"image1"和"image2"。代码示例如下:
代码语言:txt
复制
<img src="image1.jpg" class="hover-image" id="image1">
<img src="image2.jpg" class="hover-image" id="image2">
  1. 在JavaScript文件中,使用Jquery选择器选中这两张图片,并使用.hover()方法为它们添加悬停事件。代码示例如下:
代码语言:txt
复制
$(document).ready(function() {
  $(".hover-image").hover(
    function() {
      // 鼠标悬停时的操作
      var imageId = $(this).attr("id");
      console.log("鼠标悬停在图片" + imageId);
      // 在这里可以添加你想要的操作,例如显示一个提示框或者改变图片的样式等
    },
    function() {
      // 鼠标离开时的操作
      var imageId = $(this).attr("id");
      console.log("鼠标离开了图片" + imageId);
      // 在这里可以添加你想要的操作,例如隐藏提示框或者恢复图片的样式等
    }
  );
});

在上述代码中,当鼠标悬停在图片上时,会执行第一个函数,你可以在其中添加你想要的操作。当鼠标离开图片时,会执行第二个函数,你也可以在其中添加相应的操作。

这样,当鼠标悬停在这两张图片上时,会触发相应的事件,你可以根据需要在事件中添加你想要的操作。

注意:以上代码中使用的是Jquery库,如果你还没有引入Jquery,请确保在<head>标签中添加了Jquery库的引用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

18分41秒

041.go的结构体的json序列化

38秒

Lightroom Classic教程:如何在Mac Lightroom 中创建黑色电影效果

55秒

PS小白教程:如何在Photoshop中制作浮在水面上的文字效果?

1分21秒

JSP博客管理系统myeclipse开发mysql数据库mvc结构java编程

16分8秒

Tspider分库分表的部署 - MySQL

5分33秒

JSP 在线学习系统myeclipse开发mysql数据库web结构java编程

领券