Mouse out and change backGround tag

In master page

Script:

         $(".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)');
       开发者_Go百科         $(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');                        

         });

Style:

    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.

When the mouse moves over Div.RightMenu change its image (Menu.png==>MenuOver.png).

But when the mouse out from div.ContentRightMenu.one of the Div.RightMenucolors of the same color as the mouse over(MenuOver.png) stays in and not to be the first case(Menu.png)

2.

When me click on a Div.RightMenu gets its color from the default(Menu.png) will change with the new state(MenuActive.png) But when the mouse move is doing the color returns to its initial state(MenuActive.png==>Menu.png)

---

try using mouseout instead of mouseover

---

I think you will have to make use of the bind/unbind jQuery functions. Additionally you will have to make use of the mouseout event that developerdoug mentioned.

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);