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

2023年11月29日 156次阅读

我有一个菜单,我需要在每个菜单项上将身体背景更改为不同的图像.此外,它会很好,如果它会褪色或反弹或做一些漂亮和干净的变化.

到目前为止,我有这个代码：

    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>

如何继续并添加动画？

最佳答案 您只需选择要更改背景的项目即可.

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>

如果你想要一个不同的背景,你需要以某种方式存储它们.可能作为菜单上的数据属性,或创建对象,存储图像或其他东西.

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