hover时预览切换，点击后才正式切换

1、使用CSS的:hover伪类

虽然这不是通过JavaScript或jQuery直接绑定事件，但CSS的:hover伪类可以用来改变元素在鼠标移入和移出时的样式。这种方法主要用于视觉效果的改变，而不是执行复杂的JavaScript逻辑。

    #myElement:hover { 
	    /* 当鼠标悬停在#myElement上时应用的样式 */ 
	    background-color: yellow; 
	}

2、使用mouseenter和mouseleave事件（原生JavaScript）

除了mouseover和mouseout事件，你还可以使用mouseenter和mouseleave事件。这两个事件不会受到事件冒泡的影响，也就是说，当鼠标从子元素移动到父元素时，不会触发父元素的mouseenter或mouseleave事件。

var element = document.getElementById('myElement'); 
element.addEventListener('mouseenter', function() { 
    // 移入时的逻辑 
    console.log('鼠标移入了元素'); 
}); 

element.addEventListener('mouseleave', function() { 
    // 移出时的逻辑 
    console.log('鼠标移出了元素'); 
});

3、使用mouseover和mouseout事件并检查事件目标（原生JavaScript）

如果你需要使用mouseover和mouseout事件，但希望避免事件冒泡导致的问题，你可以在事件处理函数中检查事件的目标（event.target）是否是期望的元素。

    var element = document.getElementById('myElement'); 
	element.addEventListener('mouseover', function(event) { 
	     if (event.target === element) { 
	    // 移入时的逻辑 
	    console.log('鼠标移入了元素'); 
	    } 
	}); 
	element.addEventListener('mouseout', function(event) { 
	    if (event.target === element) { 
	    // 移出时的逻辑 
	    console.log('鼠标移出了元素'); 
	    } 
	});

4、使用jQuery的hover()方法（带两个函数参数）

jQuery的hover()方法可以接受两个函数作为参数，第一个函数在鼠标移入时执行，第二个函数在鼠标移出时执行。

$('#myElement').hover( 
    function() { 
    // 移入时的逻辑 
    console.log('鼠标移入了元素'); 
    }, 
    function() { 
    // 移出时的逻辑 
    console.log('鼠标移出了元素'); 
    } 
);