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

你可以使用原生的JavaScript来实现这个功能。首先，你需要为每个li元素添加一个鼠标移入事件的监听器。当鼠标移入li元素时，你可以通过改变li元素的样式来实现样式的改变。同时，你还可以通过改变右边大盒子中的图片来实现图片的改变。

以下是一个示例代码：

HTML代码：

<div class='left'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class='right'>
  <img src='image1.jpg' alt='Image 1'>
  <img src='image2.jpg' alt='Image 2'>
  <img src='image3.jpg' alt='Image 3'>
</div>

CSS代码：

.left li {
  cursor: pointer;
}

.left li.selected {
  background-color: lightblue;
}

JavaScript代码：

// 获取左边的li元素列表和右边的图片列表
var liList = document.querySelectorAll('.left li');
var imgList = document.querySelectorAll('.right img');

// 默认选中第一个li和显示第一个图片
liList[0].classList.add('selected');
imgList[0].style.display = 'block';

// 为每个li元素添加鼠标移入事件的监听器
liList.forEach(function(li, index) {
  li.addEventListener('mouseenter', function() {
    // 取消之前选中的li和显示的图片的样式
    document.querySelector('.left li.selected').classList.remove('selected');
    document.querySelector('.right img').style.display = 'none';
    
    // 为当前li添加选中样式，并显示对应的图片
    this.classList.add('selected');
    imgList[index].style.display = 'block';
  });
});

在上述代码中，首先获取了左边li元素列表和右边图片列表。然后，通过循环遍历为每个li元素添加鼠标移入事件的监听器。在鼠标移入事件的处理函数中，首先移除之前选中的li的样式和显示的图片样式，然后为当前li添加选中样式，并显示对应的图片。默认情况下，第一个li元素和对应的图片会被设置为选中状态。