Javascript 将div与js一起悬停时更改背景url

我试图做的是在列表项悬停时切换背景图像

我一直在努力使.remove和.append有效，但我正在绕圈运行，试图找到正确的目标并获得正确的语法！有人能帮忙吗

CSS:

---

其他图像位于同一文件夹中，名称不同。谢谢

您可以使用jQuery修改容器的CSS。它看起来像这样：

$（“.main_headers”）.hover（函数（）{
$（this）.closest（.splash”）.css（'background-image'，'url（'http://placehold.it/600x400/3366ff/000000")');
});
.splash{
背景：url（“http://placehold.it/600x400/ff3366/000000）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
身高：100%；
位置：固定；
}








您可以看看这个示例


参考资料

在我的示例代码中，我使用jQuery更改mouseenter和mouseout上的css背景图像值：


$（'.splash a'）.mouseenter（函数（）{
$（'.splash'）.css（“背景图像”，“url(http://placehold.it/500x350/bf1)");
});
$（'.splash a'）.mouseout（函数（）{
$（'.splash'）.css（“背景图像”，“url(http://placehold.it/499x349/fb7)");
});
.splash{
背景图片：url(http://placehold.it/500x350/fb7);
背景重复：不重复，
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
身高：100%；
位置：固定；
}








除非我遗漏了什么，否则问题是我需要更改.splash图像，而不是列表项的背景。你能用JSFIDLE发送代码吗，这样我就可以看一看。这看起来应该可以工作，但我什么也得不到。我的代码看起来像：$（document）.ready（函数（）{//swap out bg on hover$（'#mainJapan'）.hover（函数（）{$（this）.closest（'.splash'）.css（“background”，“url（Assets/Images/splash/Japan.jpg）no repeat center fixed；”；}）；是否可能原始背景覆盖了悬停或其他内容？或者悬停是否需要执行第二个函数来告诉它返回到原始图像？我更改了答案，使用了一个片段，以便您可以看到它正在工作。我还将jquery/css简化了一点——我认为把整个背景速记都放进去会把事情搞砸。
 <div class="splash">
    <div class="main_nav">
      <ul>
        <li class="main_headings" id="mainUK"><a href="/UK">The UK</a></li>
        <li class="main_headings" id="mainJapan"><a href="/Japan">Japan</a></li>
        <li class="main_headings" id="mainChina"><a href="/China">China</a></li>
        <li class="main_headings" id="mainHK"><a href="/HK">Hong Kong</a></li>
        <li class="main_headings" id="mainMalaysia"><a href="/Malaysia">Malaysia</a></li>
      </ul>
    </div>
  </div>

.splash { 
  background: url(Assets/Images/Splash/UK.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:100%;
  position:fixed;
}

#menu ul li a:hover
{
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}