javascript - 当 div 与 js 悬停时更改背景 url

Question

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

我一直在努力让 .remove 和 .append 正常工作，但我一直在兜圈子试图瞄准正确的东西并获得正确的语法!有人能伸出援手吗？

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>

html:

.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;
}

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

Answer 1

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

$(".main_headings").hover(function() {
    $(this).closest(".splash").css('background-image', 'url("http://placehold.it/600x400/3366ff/000000")');
});

.splash { 
  background: url("http://placehold.it/600x400/ff3366/000000") 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

这是非常基础的……它只是展示了如何从 jquery 中影响背景图像属性。我假设您想要更具体(即，不同的图像具有不同的 LI，并且可能在鼠标移出时将背景图像设置回原始图像)，但这应该让您开始。