我正在尝试通过缓慢的 bg-image 变化来进行悬停动作。
.menu_part
{
border-left: 1px solid black;
background-image: url(../images/bg_menu.png);
float:left;
padding: 2px 10px;
}
.menu_part:hover
{
background-image: url(../images/bg_menu_hove.png);
color: #FFF;
}
菜单:
<div id="head_menu">
<a href="#order"><div>make order</div></a>
<a href="#portfolio"><div>portfolie</div></a>
<a href="#contacts"><div>contacts</div></a>
<a href="#vacancies"><div>vacancies</div></a>
<a href="#about"><div>about company</div></a>
</div>
一些jQuery:
$('#head_menu a').addClass('menu_part');
现在我正在尝试为选择器 $('#head_menu a') 编写悬停动作。我可以将 bg-image 更改为需要,当悬停时,慢慢地?
这是我的尝试代码:
$("#head_menu a").hover(
function() {
$(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000);
},
function() {
$(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);
}
);
但它现在甚至不显示菜单。我做错了什么?我也会尝试使用 bg-position。
这是带有 bg-position 的代码,我无法理解。我将bg_menu.png和bg_menu_hove.png合并为 1 张 200px+200px 的图像。即使没有 JQuery,上面的样式也不起作用。
.menu_part:hover
{
background-image: url(../images/new_menu.png);
background-position: 0 -200px;
}