懸停事件問題與jquery

嗨全部即時建立一個菜單，即時嘗試把懸停效應，每個菜單項，但...當我翱翔一切工作很好，我得到的HTML我想要的菜單項有一個backgruond圖像。懸停事件問題與jquery

但是，大部分時間都是停火效應。我發現如果我將鼠標在ul菜單上肆意地移動，它就能正常工作。但是如果我的鼠標在li項目上垂直移動，它就會激活。我的代碼是這樣的：

$("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem); 
function ChangeToHoverMenuItem() 
{ 
    var currLi = $(this); 
    lastLi = currLi; 
    var currMenuItemText = currLi.find("a").text(); 
    currLi.html(""); 

    currLi.append("<div style='float:right;'><div class='right_item_hov'></div>" + 
       "<a class='item_menu_hov'>" + 
       currMenuItemText + 
       "</a>" + 
       "<div class='left_item_hov'></div></div>"); 
} 

function ChangeBackMenuItem() 
{ 
    var currLi = $(this); 
    var currMenuItemText = currLi.find("a").text(); 

    currLi.html(""); 
    currLi.append("<a>" + currMenuItemText + "</a>"); 

} 

    <div class="menu_middle"> 
    <ul class="menu"> 
     <li> 
      <a> 
       main 
      </a> 
     </li> 
     <li> 
      <a> 
       gallery 
      </a> 
     </li> 
     <li> 
      <a> 
       event 
      </a> 
     </li> 
     <li>     
      <a> 
       about 
      </a> 
     </li> 
     <li> 
      <a> 
       contact 
      </a> 
     </li> 
    </ul> 
</div>

謝謝

來源

2010-09-25 guy schaller

您的代碼按預期工作（在Firefox 3.6.8/Ubuntu上）。你使用什麼瀏覽器？你在其他瀏覽器中測試過它嗎？ – hacksteak25 2010-09-25 14:37:40

不，我真的只嘗試在Windows 7的Firefox。這可能是因爲我在這個網站上有奇怪的CSS ..它是一個圓角的框架，因爲rgb是半透明的。它有像位置相對的東西..我認爲這可能是其不工作的原因...虐待進一步測試它，並告訴你以後 – 2010-09-25 21:23:04

奇怪的是，兄弟元素上有兩個mouseenter()事件，其間沒有mouseleave()事件。

一個想法是註冊mouseenter()和mouseleave()事件，而不是使用hover()。 hover()應該這樣做，但是如何知道。如果這樣做，問題在於執行hover()，但我不這麼認爲。


$("ul.menu li") 
    .mouseenter(ChangeToHoverMenuItem) 
    .mouseleave(ChangeBackMenuItem);

另一個想法是確保mouseleave()代碼被執行。在您的「doHover」處理程序中，您可以檢查是否有hoveredItem。如果是這樣，您可以撥打ChangeBackMenuItem功能，將仍懸停的物品作爲this。爲了確保在你離開你的ul時調用「unhover」處理程序，你需要一個mouseleave事件，它也是這樣。此解決方案依賴ul元素上的工作mouseleave。


$(function() { 

var hoveredItem = null; 

function ChangeToHoverMenuItem() 
{ 
    if (hoveredItem) { 
     ChangeBackMenuItem.call(hoveredItem); 
    } 
    hoveredItem = this; 

    var currLi = $(this); 
    lastLi = currLi; 
    var currMenuItemText = currLi.find("a").text(); 
    currLi.html(""); 

    currLi.append("" + 
       "" + 
       currMenuItemText + 
       "" + 
       ""); 
} 

function ChangeBackMenuItem() 
{ 
    var currLi = $(this); 
    var currMenuItemText = currLi.find("a").text(); 

    currLi.html(""); 
    currLi.append("" + currMenuItemText + ""); 
    hoveredItem = null; 

} 

$("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem); 
$("ul.menu").mouseleave(function() { 
    if (hoveredItem) { 
    ChangeBackMenuItem.call(hoveredItem); 
    hoveredItem = null; 
    } 
}); 
});

來源

2010-09-26 13:52:33 hacksteak25

先給邊界到李（使用CSS「邊界」屬性），然後添加的console.log（firebug）語句中的「開始ChangeBackMenuItem'來查看函數是否在每次您取消懸停時被調用。

來源

2010-09-25 11:17:41 letronje

嗨tnx的答覆。給它一個邊界確實有幫助。但是......它還不完美。如果我用鼠標快速移動，懸停事件dosnt就會被解僱。所以我堅持從我的懸停事件的HTML。也不能給它一個邊框，因爲它在背景上不是純色。它是一個漸變。當我嘗試一個透明的背景時，它看起來很奇怪。 – 2010-09-25 11:30:19

懸停事件問題與jquery

回答

相關問題