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中实现background-image属性。我假设您想要更具体（即，使用不同的LI具有不同的图像，并且可能在mouseout上将背景图像设置回原始图像），但这应该让您开始。

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值：

＆＃13;

$('.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)");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

当div与js一起盘旋时更改背景URL

3 个答案: