原生JS实现鼠标悬停切换li样式和图片 - 代码示例

你可以使用原生JavaScript来实现这个效果。首先，你需要给每个li元素添加一个鼠标移入事件监听器，当鼠标移入时改变li的样式，并且改变右边图片的内容。\n\nHTML代码：\nhtml\n<ul>\n <li id="item1">Item 1</li>\n <li id="item2">Item 2</li>\n <li id="item3">Item 3</li>\n</ul>\n<div id="imageBox"></div>\n\n\nJavaScript代码：\njavascript\n// 获取li元素和图片盒子\nvar item1 = document.getElementById("item1");\nvar item2 = document.getElementById("item2");\nvar item3 = document.getElementById("item3");\nvar imageBox = document.getElementById("imageBox");\n\n// 给每个li元素添加鼠标移入事件监听器\nitem1.addEventListener("mouseover", function() {\n // 改变li的样式\n item1.style.backgroundColor = "red";\n item1.style.color = "white";\n // 改变右边图片的内容\n imageBox.style.backgroundImage = "url('image1.jpg')";\n});\n\nitem2.addEventListener("mouseover", function() {\n item2.style.backgroundColor = "green";\n item2.style.color = "white";\n imageBox.style.backgroundImage = "url('image2.jpg')";\n});\n\nitem3.addEventListener("mouseover", function() {\n item3.style.backgroundColor = "blue";\n item3.style.color = "white";\n imageBox.style.backgroundImage = "url('image3.jpg')";\n});\n\n\n上述代码会根据鼠标滑到每个li元素上时，改变li的样式和右边图片的内容。你可以根据实际需要修改样式和图片的路径。