JQuery实现的图片翻转

最新推荐文章于 2022-02-23 15:54:45 发布

浴火涅磐

最新推荐文章于 2022-02-23 15:54:45 发布

阅读量2.7k

点赞数

分类专栏： js 文章标签： jquery border function class div

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的菜单栏图片悬停切换效果。当鼠标悬停在菜单项上时，对应的图标会切换为预设的激活状态图片；当鼠标移开时，则恢复原状。特别注意了激活状态菜单项的行为细节。

JS代码 <mce:script type="text/javascript"></mce:script> HTML部分如下： <div id="Menu"> <ul id="Nav"> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_Home.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Home.gif" border="0" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_Intro.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Intro.gif" border="0" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_Lerrn_On.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Lerrn_On.gif" border="0" class="active" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_Studet.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Studet.gif" border="0" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_Job.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Job.gif" border="0" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> <li><a href="#" mce_href="#"><img src="http://www.bxhwl.cn/article/Images/Menu_About.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_About.gif" border="0" /></a></li> <li><img src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" mce_src="http://www.bxhwl.cn/article/Images/Menu_Line.gif" border="0" /></li> </ul> </div>