js 鼠标移入移出 修改背景图片 图片适应大小

在JavaScript中，你可以通过监听鼠标事件`mouseover`和`mouseout`来改变元素的背景图片，并且使用CSS来确保图片能够适应元素大小。下面是一个简单的示例：

// 获取需要响应鼠标的元素
const element = document.getElementById('yourElementId');

// 定义鼠标移入和移出的函数
function changeBackgroundOnHover(inOrOut) {
  if (inOrOut === 'hover') {
    // 当鼠标移入时，更改背景
    element.style.backgroundImage = "url('newImage.jpg')";
  } else { // 鼠标移出
    // 恢复原背景或设置另一个默认背景
    element.style.backgroundImage = "url('originalImage.jpg')";
  }
}

// 添加事件监听
element.addEventListener('mouseover', function() {
  changeBackgroundOnHover('hover');
});

element.addEventListener('mouseout', function() {
  changeBackgroundOnHover('');
});

// CSS部分确保图片自适应大小
element.style background-size: cover; /* 这会使图片铺满容器并保持宽高比 */

在这个例子中，当用户将鼠标悬停在id为`yourElementId`的元素上时，背景图片会切换到`newImage.jpg`；当鼠标离开时，恢复为`originalImage.jpg`。同时，`background-size: cover`会让图片始终填充其容器并保持原始比例。