JavaScript的懸停問題

當我用戶要麼jquery的.hover（）或JavaScript的的mouseenter（），則事件觸發不僅當鼠標進入元件，而且當鼠標越過該元件內的任何元素。我怎樣才能阻止它，只有在鼠標進入或退出該元素時觸發，元素的子元素對事件沒有影響？JavaScript的懸停問題

 $(document).ready(function(){ 
      introAnimation(); 

      $('#nav-item1').hover(function() { 
       $('#createSub').slideDown(300); 
      }); 
      $('#nav-item1').mouseout(function() { 
       $('#createSub').slideUp(300); 
      }); 

      $('#nav-item2').hover(function() { 
       $('#manageSub').slideDown(300); 
      }); 
      $('#nav-item2').mouseout(function() { 
       $('#manageSub').slideUp(300); 
      }); 
      $('#nav-item3').hover(function() { 
       $('#storeSub').slideDown(300); 
      }); 
      $('#nav-item3').mouseout(function() { 
       $('#storeSub').slideUp(300); 
      }); 
     });

來源

2012-01-24 Russell Strauss

這是不正確的;只有'mouseover（）'做到這一點。請舉個例子。 – SLaks

你能提供樣品嗎？這不是默認行爲。子元素在父元素中，因此懸停不應受子元素的影響。 – Fresheyeball

它似乎沒有像我描述的那樣行事，但您可以在此處查看示例（左側導航欄）：http://developer.crawford.com/ –

懸停有一個方法來解除懸停。無需mouseout事件，它讓你發射時鼠標移到一個嵌套子元素：

$(document).ready(function(){ 
     introAnimation(); 

     $('#nav-item1').hover(function() { 
      $('#createSub').slideDown(300); 
     },function() { 
      $('#createSub').slideUp(300); 
     }); 
     $('#nav-item2').hover(function() { 
      $('#manageSub').slideDown(300); 
     },function() { 
      $('#manageSub').slideUp(300); 
     }); 
     $('#nav-item3').hover(function() { 
      $('#storeSub').slideDown(300); 
     },function() { 
      $('#storeSub').slideUp(300); 
     }); 
    });

來源

2012-01-24 23:07:28 AlienWebguy

偉大的建議，我甚至沒有意識到這一點。 –

的處理程序中添加此：

if(ev.target !== this){ return; }

ev.target就是鼠標事件觸發的。 this是你約束事件到

來源

2012-01-24 23:07:56

JavaScript的懸停問題

回答

相關問題