javascript - 如何在菜单项悬停时更改正文背景图像？

Question

我有一个菜单，我需要将每个菜单项的正文背景更改为不同的图像。此外，如果它在更改时会褪色或弹跳或做一些漂亮干净的事情，那就太好了。

到目前为止我有这段代码:

    var $body = $('body');
    $('li:first-child').hover(function(){
        $body.css('background-image', 'url("img/dd.jpg")');
    }, function() {
        $body.css('background-image', '')
    })

html是

<div id="main-menu-container">
    <ul>
       <li><a><span>One</span></a></li>

       <li><a><span>Two</span></a></li>

       <li><a><span>Three</span></a></li>      
    </ul>
</div>

如何继续并添加动画？

Answer 1

您可以只选择要更改背景的项目。

var $body = $('body');
$('#main-menu-container li a').hover(function(){
    $body.css('background', 'red');
}, function() {
    $body.css('background', '')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>

如果你想要不同的背景，你需要以某种方式存储它们。也许作为菜单上的 data 属性，或者创建一个对象，存储图像，或其他东西。

var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];

$('#main-menu-container li a').hover(function(){
    $body.css('background', colors[$(this).parent().index()]);
}, function() {
    $body.css('background', '')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>