Question

在母版页

中

脚本：

         $(".RightMenu").click(function(){ 

                $(".FlashMenu").css('background-image','url(icon/PersonalPage/blueFlash30.png)');   
                $('.RightMenu').css('background-image','url(icon/PersonalPage/Menu.png)');                

                $(this).css('background-image','url(icon/PersonalPage/MenuActive.png)');
                $(this).css('background-repeat','repeat-x');

                $(this).find(">:first-child").css('background-image','url(icon/PersonalPage/greenflash30.png)');
                $(this).find(">:first-child").css('background-repeat','no-repeat');  



         });
         $(".RightMenu").mouseover(function(){ 

                $('.RightMenu').css('background-image','url(icon/PersonalPage/Menu.png)');                

                $(this).css('background-image','url(icon/PersonalPage/MenuOver.png)');
                $(this).css('width','150px');
                $(this).css('height','20px');
                $(this).css('background-repeat','repeat-x');                        

         });

风格：

    div.RightMenu
    {
        background-repeat: no-repeat;
        text-align: right;
        cursor: pointer;
        height: 20px;
        float: right;
        width: 150px;
        background-image: url(icon/PersonalPage/Menu.png);
        border: 1px solid #ede7da;
    }
    div.FlashMenu
    {
        background-image: url(icon/PersonalPage/blueFlash30.png);
        background-repeat: no-repeat;
        float: left;
        width: 30px;
        height: 20px;
    }

HTML：

<table>
   <tr>
     <td  valign="top" colspan="1" width="185px">
                <div id="ContentRightMenu" >
                    <div class="RightMenu">
                        Home
                        <div class="FlashMenu">
                        </div>
                    </div>
                    <div class="RightMenu">
                        About
                        <div class="FlashMenu">
                        </div>
                    </div>
                    <div class="RightMenu">
                        Product
                        <div class="FlashMenu">
                        </div>
                    </div>

         </tr>
 </table>

=============================================== ======= 1。

当鼠标移过Div.RightMenu时，请更改其图像（Menu.png ==＆gt; MenuOver.png）。

但是当鼠标从div.ContentRightMenu输出时，与鼠标悬停在同一颜色的Div.RightMenu颜色之一（MenuOver.png）保持不变并且不是第一种情况（Menu.png））

2

当我点击Div.RightMenu时，其默认颜色（Menu.png）将随新状态（MenuActive.png）而变化但是当鼠标移动时，颜色会返回其初始状态（ MenuActive.png ==＆GT; Menu.png）

Answer 1

尝试使用mouseout而不是mouseover

Answer 2

我认为你必须使用bind / unbind jQuery函数。此外，您将不得不使用开发人员提到的mouseout事件。

function rightMenuClick()
{
    $(".FlashMenu").css('background-image','url(icon/PersonalPage/blueFlash30.png)');   
    $(".RightMenu").css('background-image','url(icon/PersonalPage/Menu.png)');   
    $(".RightMenu").bind('mouseover', rightMenuMouseOver);
    $(".RightMenu").bind('mouseout', rightMenuMouseOut);                
    $(this).css('background-image','url(icon/PersonalPage/MenuActive.png)');
    $(this).css('background-repeat','repeat-x');
    $(this).find(">:first-child").css('background-image','url(icon/PersonalPage/greenflash30.png)');
    $(this).find(">:first-child").css('background-repeat','no-repeat');     
    $(this).unbind('mouseout');
    $(this).unbind('mouseover');
}           
function rightMenuMouseOut()
{               
    $(this).css('background-image','url(icon/PersonalPage/Menu.png)');                              
}           
function rightMenuMouseOver()
{           
    $(this).css('background-image','url(icon/PersonalPage/MenuOver.png)');              
}                   
$(".RightMenu").bind('click', rightMenuClick);       
$(".RightMenu").bind('mouseover', rightMenuMouseOver);
$(".RightMenu").bind('mouseout', rightMenuMouseOut);

将鼠标移出并更改backGround标记

2 个答案: