将鼠标悬停在其容器div上时交换图像

 .normal-image {

   background-image: url('normal-image.jpg');

   /* 或者使用img标签：<img src="normal-image.jpg"> */

 }

 .hover-image:hover {

   background-image: url('hover-image.jpg');

   /* 或者使用img标签：<img src="hover-image.jpg"> */

 }

 var divElement = document.querySelector('.image-container');

 var normalImage = 'normal-image.jpg';

 var hoverImage = 'hover-image.jpg';

 divElement.addEventListener('mouseover', function() {

   // 改变图像的src属性或背景图片为hoverImage

   // 例如：divElement.src = hoverImage;

   // 或者：divElement.style.backgroundImage = 'url(' + hoverImage + ')';

 });

 divElement.addEventListener('mouseout', function() {

   // 改变图像的src属性或背景图片为normalImage

   // 例如：divElement.src = normalImage;

   // 或者：divElement.style.backgroundImage = 'url(' + normalImage + ')';

 });

 <!-- 图像元素 -->