Question

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)');
                $(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)

Answer 1

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