JQuery实现鼠标移入移出效果

使用jQuery实现鼠标移入移出效果，可以通过.hover()方法来实现。.hover()方法用于模拟鼠标悬停事件，它可以接受两个函数作为参数，第一个是鼠标移入时的回调函数，第二个是鼠标移出时的回调函数。

以下是一个简单的示例，假设我们有一个HTML元素，我们想在鼠标移入时改变其背景颜色，移出时恢复原色：

HTML:

<div id="hover-effect">鼠标移入或移出看效果</div>

CSS:

#hover-effect {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f0f0f0;
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

jQuery:

$(document).ready(function() {
  $('#hover-effect').hover(
    function() {
      $(this).css('background-color', '#blue'); // 鼠标移入
    },
    function() {
      $(this).css('background-color', '#f0f0f0'); // 鼠标移出
    }
  );
});

在这个例子中，当鼠标移入#hover-effect元素时，背景色会变成蓝色，而当鼠标移出时，背景色会恢复为#f0f0f0。