解决click与hover(mouseover)的冲突问题

最新推荐文章于 2025-07-09 15:23:16 发布

lucky123star

最新推荐文章于 2025-07-09 15:23:16 发布

阅读量7.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/lucky123star/article/details/78807842

本文介绍了一个使用jQuery实现的元素鼠标悬停效果案例。通过jQuery的.data()方法设置和读取元素的数据属性来控制不同的样式变化，并结合.mouseover()和.mouseout()事件触发不同的UI反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要应用到一个知识点：$(selector).data('name','value');

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.content{
width:100px;
height:100px;
border:2px solid #999;
border-radius:10px;
}
.active{
background:red;
}
.onbackground{
background:green;
}
</style>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body >
<div class="content">
<button class="seemore">查看</button>
</div>
<script>

$('.content').mouseover(function(){

var a = $(".content").data("flag");
console.log(a);
if(a==1){

}else{
$(this).addClass("onbackground");
}

});

$(".content").mouseout(function(){

$(this).removeClass("onbackground");
})

$(".seemore").click(function(){
$(this).parent().addClass("active");
$(".content").data("flag","1");
})




</script>


</body>
</html>