我的下拉菜单中有以下代码:
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="#"> Menu 6.1</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a></li>
</ul>
</div>
使用以下css:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
line-height: 35px;
float: left;
width: 144px;
display: block;
color: #f3f6fb;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
line-height: 35px;
float: left;
width: 144px;
display: block;
color: #f3f6fb;
text-decoration: none;
text-align: center;
}
当我将鼠标悬停在下拉菜单项上时,背景图像会发生变化。我想使用jquery或javascript来设置悬停动作的动画,以使背景颜色更改更流畅/动画。
最简单的方法是什么?
非常感谢你的建议。