可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
<img src="image1.jpg" class="hover-image" id="image1">
<img src="image2.jpg" class="hover-image" id="image2">
$(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库的引用。
云+社区沙龙online [云原生技术实践]
云+社区技术沙龙[第28期]
云+未来峰会
云上直播间
云+社区技术沙龙[第7期]
云上直播间
云+社区技术沙龙[第14期]
云+社区技术沙龙[第11期]
云+社区技术沙龙[第21期]
云原生正发声
领取专属 10元无门槛券
手把手带您无忧上云