解决click与hover(mouseover)的冲突问题
主要应用到一个知识点:$(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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步