我有一个菜单,我需要将每个菜单项的正文背景更改为不同的图像。此外,如果它在更改时会褪色或弹跳或做一些漂亮干净的事情,那就太好了。
到目前为止我有这段代码:
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>
如果你想要不同的背景,你需要以某种方式存储它们。也许作为菜单上的 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>
关于javascript - 如何在菜单项悬停时更改正文背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39074492/