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

可以通过原生JavaScript来实现这个功能。首先，需要在HTML中创建一个大盒子，并为其添加一个id属性，以便在JavaScript中进行操作。然后，使用JavaScript获取该大盒子的引用，并为其添加鼠标移入和移出事件监听器。

HTML代码：

<div id='big-box'>
  <div class='small-box'>
    <div class='text-box'>
      <p>文字内容</p>
    </div>
    <div class='image-box'>
      <img src='默认图片路径' alt='默认图片'>
    </div>
  </div>
  <div class='small-box'>
    <div class='text-box'>
      <p>文字内容</p>
    </div>
    <div class='image-box'>
      <img src='默认图片路径' alt='默认图片'>
    </div>
  </div>
  <div class='small-box'>
    <div class='text-box'>
      <p>文字内容</p>
    </div>
    <div class='image-box'>
      <img src='默认图片路径' alt='默认图片'>
    </div>
  </div>
</div>

接下来，使用JavaScript为大盒子添加鼠标移入和移出事件监听器，并定义事件处理函数。

JavaScript代码：

// 获取大盒子引用
var bigBox = document.getElementById('big-box');

// 获取所有小盒子的引用
var smallBoxes = bigBox.getElementsByClassName('small-box');

// 遍历小盒子，为每个小盒子添加鼠标移入和移出事件监听器
for (var i = 0; i < smallBoxes.length; i++) {
  smallBoxes[i].addEventListener('mouseover', function () {
    // 获取当前小盒子中的图片引用
    var image = this.querySelector('.image-box img');
    
    // 获取当前小盒子中的文字引用
    var text = this.querySelector('.text-box');
    
    // 添加样式和更换图片
    this.classList.add('active');
    image.src = '鼠标移入图片路径';
    
    // 隐藏文字
    text.style.display = 'none';
  });
  
smallBoxes[i].addEventListener('mouseout', function () {
    // 获取当前小盒子中的图片引用
    var image = this.querySelector('.image-box img');
    
    // 获取当前小盒子中的文字引用
    var text = this.querySelector('.text-box');
    
    // 移除样式和恢复默认图片
    this.classList.remove('active');
    image.src = '默认图片路径';
    
    // 显示文字
    text.style.display = 'block';
  });
}

最后，可以根据需要自定义CSS样式来实现鼠标滑过效果。

CSS代码：

.small-box {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px;
}

.small-box.active {
  background-color: #f00;
}

.image-box img {
  width: 100px;
  height: 100px;
}

.text-box {
  text-align: center;
  margin-top: 50px;
}

这样，当鼠标滑过小盒子时，会显示红色背景，并且图片会更换为鼠标移入的图片，文字会隐藏；当鼠标移出小盒子时，样式和图片会恢复默认状态，文字会显示出来。