当 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

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

$(".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，并且可能在鼠标移出时将背景图像设置回原始图像），但这应该让你开始。

Answer 2

你可以看看这个例子。

http://jsfiddle.net/F2Z9Z/5/

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

参考。

Change background image on hover

Answer 3

在我的示例代码中，我使用 jQuery 更改 mouseenter 和 mouseout 上的 css background-image 值：

$('.splash a').mouseenter(function() {
  $('.splash').css("background-image", "url(http://placehold.it/500x350/bf1)");
});
$('.splash a').mouseout(function() {
  $('.splash').css("background-image", "url(http://placehold.it/499x349/fb7)");
});

.splash { 
  background-image: url(http://placehold.it/500x350/fb7);
  background-repeat: no-repeat,
  background-position: center center;
  -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>

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

Change background url when div is hovered with js

javascript

css

jquery

background-image

hover