鼠標並更改背景標籤

腳本：

  $(".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 ==> MenuOver.png）。

但是，當從出。一div.ContentRightMenu顏色相同的鼠標懸停（MenuOver.png）的Div.RightMenu顏色的小鼠停留在和不被所述第一殼體（Menu.png）

2。

當我點擊一個Div.RightMenu從默認狀態（Menu.png）獲取其顏色將隨新狀態（MenuActive.png）而改變但是當鼠標移動時，顏色返回到其初始狀態（MenuActive.png ==> Menu.png）

來源

2011-07-06 ashkufaraz

我想你將不得不使用綁定/取消綁定jQuery函數。此外，您將不得不使用developerdoug提到的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);

來源

2011-07-06 18:41:13

坦克你非常非常非常非常非常多。 – ashkufaraz

嘗試使用mouseout而不是鼠標懸停

來源

2011-07-06 18:06:54 developerdoug

鼠標移出從格說錯誤：此功能計量不 – ashkufaraz

鼠標並更改背景標籤

回答

相關問題