鼠标悬停按钮时切换另一div背景图失效，求排查解决

开发者阿泽

2026-8-13

问题分析与修复方案

核心问题

你的JS代码给backgroundImage赋值时存在语法错误，同时路径、引号使用不当，导致背景图无法正常切换：

路径包含多余空格：../ img / wariant1.png 里的空格会让路径失效
字符串末尾多加分号：style.backgroundImage赋值不需要在字符串内加;
引号嵌套错误：第二个函数里'url("../img/tapet.png");'的写法会引发解析异常
若要保留原CSS的渐变效果，切换时需同时包含渐变代码和新图片路径，否则渐变会被覆盖

修复后的代码

HTML（确保目标div存在`id="menu-imgs"`）

<div class="button" onmouseenter="button1()">
  <a href="oserwerze.htm">
    <p class="button-c">O SERWERZE</p>
  </a>
</div>
<!-- 示例第二个按钮 -->
<div class="button" onmouseenter="button2()">
  <a href="xxx.htm">
    <p class="button-c">其他按钮</p>
  </a>
</div>

<!-- 用于切换背景的目标div -->
<div id="menu-imgs"></div>

修复后的JS

function button1() {
  console.log("button1()");
  // 保留渐变效果，替换目标图片路径
  document.getElementById("menu-imgs").style.backgroundImage = 
    'linear-gradient(to right, rgba(20, 20, 20, 1) 20%, rgba(20, 20, 20, 0.3) 90%), url("../img/wariant1.png")';
}

function button2() {
  // 恢复原背景（包含渐变）
  document.getElementById("menu-imgs").style.backgroundImage = 
    'linear-gradient(to right, rgba(20, 20, 20, 1) 20%, rgba(20, 20, 20, 0.3) 90%), url("../img/tapet.png")';
}

// 如果不需要渐变，可直接写图片路径：
// function button1() {
//   document.getElementById("menu-imgs").style.backgroundImage = 'url("../img/wariant1.png")';
// }