首页 新闻 会员 周边 捐助

JQUERY如何实现菜单的动态修改?

0
悬赏园豆:10 [已解决问题] 解决于 2012-05-11 15:37
<div class="mainmenu">
    <div class="index">
    <div class="Normal"><a href="/home" title="首页,Normal,home,sxcg" ><img alt="首页,Normal" src="/Content/Themes/Default/Mainmenu/Normal/home.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/wgzx" title="温故知新,Normal,wgzx,sxcg" ><img alt="温故知新,Normal" src="/Content/Themes/Default/Mainmenu/Normal/wgzx.png" /></a></div>
</div>
<div>
    <div class="Selected"><a href="/sxcg" title="思想茶馆,Selected,sxcg,sxcg" ><img alt="思想茶馆,Selected" src="/Content/Themes/Default/Mainmenu/Selected/sxcg.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/shcs" title="书画藏室,Normal,shcs,sxcg" ><img alt="书画藏室,Normal" src="/Content/Themes/Default/Mainmenu/Normal/shcs.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/zjyh" title="专家有话,Normal,zjyh,sxcg" ><img alt="专家有话,Normal" src="/Content/Themes/Default/Mainmenu/Normal/zjyh.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/gxzk" title="国学智库,Normal,gxzk,sxcg" ><img alt="国学智库,Normal" src="/Content/Themes/Default/Mainmenu/Normal/gxzk.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/mtsk" title="媒体时空,Normal,mtsk,sxcg" ><img alt="媒体时空,Normal" src="/Content/Themes/Default/Mainmenu/Normal/mtsk.png" /></a></div>
    <div class="Normal"><a href="/zbmm" title="招兵买马,Normal,zbmm,sxcg" ><img alt="招兵买马,Normal" src="/Content/Themes/Default/Mainmenu/Normal/zbmm.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/flfg" title="法律法规,Normal,flfg,sxcg" ><img alt="法律法规,Normal" src="/Content/Themes/Default/Mainmenu/Normal/flfg.png" /></a></div>
    <div class="Normal"><a href="/whlt" title="文化论坛,Normal,whlt,sxcg" ><img alt="文化论坛,Normal" src="/Content/Themes/Default/Mainmenu/Normal/whlt.png" /></a></div>
</div>
<script language="javascript" type="text/javascript">
    $(document).ready(
        function () {
            $('.mainmenu div.Normal img').mouseover(function () { alert(1); });
            //alert($('.mainmenu div.Normal img')[0].outerHTML);
            /*$('.mainmenu div.Normal img').mouseover(function(){
            alert(1);//$('.mainmenu div.Normal img').attr("src", "");
            }*/
        }
    );
</script>
</div>

如上段代码,有一行菜单,我希望当鼠标进入class为Normal的区域时把其内的图片地址进行修改,当鼠标离开的时候恢复原状。

鼠标进入后的图标格式跟原始正常状况路径类似,只是把Normal修改为Overed。

无之无的主页 无之无 | 大侠五级 | 园豆:5095
提问于:2012-05-03 11:13
< >
分享
最佳答案
0
var imgSr=$("#图片的ID").attr("src");
$(
'.mainmenu div.Normal img').hover(function () { $("#要修改的图片").attr("src","修改的地址") },function()
{
  $("#图片").attr("src",imgSr);
});
收获园豆:10
需要格局 | 老鸟四级 |园豆:2145 | 2012-05-03 11:20

这个图片是动态的。该如何在hover或mouseover事件的方法中获取当前触发事件的对象?

无之无 | 园豆:5095 (大侠五级) | 2012-05-03 11:25

@笨笨蜗牛: var currentElement= $(this);

 

currentElement就是当前的对象!!

需要格局 | 园豆:2145 (老鸟四级) | 2012-05-03 11:27

不可以给我说!!

需要格局 | 园豆:2145 (老鸟四级) | 2012-05-03 11:31

@田麦成: 谢谢!就是$(this)!!!

无之无 | 园豆:5095 (大侠五级) | 2012-05-11 15:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册