选择对象时的鼠标交互

By minirplus on 2023-01-11 in DEV

鼠标hover到对象上时实现边框样式动态调整和点击后的样式调整

普通的点击事件绑定如下

1	$("div#planCard").click(function(){

普通的hover事件绑定如下

1	$("div#planCard").hover(function(){

但是，如果要实现hover移开时恢复原有样式，需要使用回调函数

$("div#planCard").hover(function(){

$(this).addClass("border-secondary");

}, function(){

if(!$(this).hasClass("choosed")){

$(this).removeClass("border-secondary");

}

});

这时如果对象是通过ajax动态加载的，那么就需要换另一种方式

绑定ajax点击事件如下

1	$(document).on("click", 'div#planCard', function(event) {

绑定hover事件和回调如下

$(document).on({

mouseenter: function() {

$(this).addClass("border-secondary");

mouseleave: function() {

$(this).removeClass("border-secondary");

}

}, 'div#planCard');

要实现hover到对象上时鼠标变为手型，直接加上

1	$("div#planCard").css('cursor','pointer');

但是如果是ajax加载的元素，则要在ajax回调内增加

1 2	$.getJSON(targetUrl, function(data, status){ $("div#planCard").css('cursor','pointer');