原生JS实现鼠标悬停效果：动态切换图片和样式

可以通过原生JavaScript来实现这个功能。首先，我们需要创建HTML结构，如下所示：

<div id='bigBox'>
  <div class='smallBox'>
    <div class='innerBox'>
      <p>文字</p>
    </div>
    <div class='innerBox'>
      <img src='default-image.png' alt='默认图片'>
      <img src='hover-image.png' alt='鼠标滑过图片' class='hoverImage'>
    </div>
  </div>
  <div class='smallBox'>
    <div class='innerBox'>
      <p>文字</p>
    </div>
    <div class='innerBox'>
      <img src='default-image.png' alt='默认图片'>
      <img src='hover-image.png' alt='鼠标滑过图片' class='hoverImage'>
    </div>
  </div>
  <div class='smallBox'>
    <div class='innerBox'>
      <p>文字</p>
    </div>
    <div class='innerBox'>
      <img src='default-image.png' alt='默认图片'>
      <img src='hover-image.png' alt='鼠标滑过图片' class='hoverImage'>
    </div>
  </div>
</div>

接下来，我们可以使用JavaScript来添加事件监听器，并在鼠标滑过时改变样式和图片。下面是一个实现的示例：

// 获取所有小盒子元素
const smallBoxes = document.querySelectorAll('.smallBox');

// 遍历小盒子元素，并为每个小盒子添加事件监听器
smallBoxes.forEach((box) => {
  const innerBox = box.querySelector('.innerBox');
  const hoverImage = box.querySelector('.hoverImage');

  // 鼠标滑过时改变样式和图片
  box.addEventListener('mouseover', () => {
    innerBox.classList.add('active');
    hoverImage.src = 'hover-image.png';
  });

  // 鼠标离开时恢复默认样式和图片
  box.addEventListener('mouseout', () => {
    innerBox.classList.remove('active');
    hoverImage.src = 'default-image.png';
  });
});

以上代码会为每个小盒子添加鼠标滑过和离开的事件监听器。当鼠标滑过时，会给相应的小盒子添加一个名为'active'的类，从而改变样式。同时，会将图片的src属性修改为'hover-image.png'，以显示对应的鼠标滑过图片。当鼠标离开时，会移除'active'类，使样式恢复默认，并将图片的src属性修改为'default-image.png'，以显示默认图片。