的jQuery的onmouseover +的onmouseout /在兩個不同的div懸停

我有一個問題：的jQuery的onmouseover +的onmouseout /在兩個不同的div懸停

這裏我的HTML的一部分：

<div id="div_1"> 
    Here Hover 
</div> 
<div id="div_2"> 
    Here content to show 
</div>

而且這裏我jQuery腳本的一部分：

jQuery('#div_2').hide(); 
jQuery('#div_1').onmouseover(function() { 
    jQuery('#div_2').fadeIn(); 
}).onmouseout(function(){ 
    jQuery('#div_2').fadeOut(); 
});

問題：

如果我懸停在div_1，所述div_2所示，如果我懸停的那樣，div_2是隱藏的，但：

如果我首先在div_1上徘徊，然後再通過div_2，那麼div_2會很快隱藏起來。

我試過用jQuery.addClass（）;在鼠標移出div_1後，但沒有任何變化。

我不想做在第一個div的第二個div ...有沒有另一種方式與jQuery？

THX艾哈邁德

來源

2010-03-08 ahmet2106

要開始爲您送行，你需要將'on'前綴失去鼠標懸停/ mouseout事件處理程序。它只是'jQuery（'＃div_1'）。mouseover（function（）{...' – karim79 2010-03-08 20:30:49

這是一個迷你複製錯誤^^ thx – ahmet2106 2010-03-08 20:34:03

順便說一句，你應該使用'hover'速記來添加處理程序 – SLaks 2010-03-08 20:36:08

要做到這一點，最簡單的方法就是把兩個<div>個第三個容器內<div>，然後應用懸停效果的集裝箱<div>。

順便說一句，你應該使用hover速記來添加處理程序。

來源

2010-03-08 20:30:13 SLaks

There是更多然後在其他div顯示不同的內容，在鼠標懸停，（阿賈克斯），所以我嘗試只用一個div – ahmet2106 2010-03-08 20:34:50

你是什麼意思？ – SLaks 2010-03-08 20:40:38

嘗試使用hover（）而不是mouseover（）和mouseout（）。

退房此文檔頁面：http://api.jquery.com/hover/

希望這有助於。

來源

2010-03-08 20:36:56 Raja

已嘗試所有準備工作：S – ahmet2106 2010-03-08 20:38:36

將鼠標懸停處理程序添加到#div_1，並將鼠標懸停處理程序添加到#div_2。這樣，當鼠標懸停在#div_1上時，會顯示#div_2，並且當您將鼠標移出#div_2時（而不是在鼠標移出#div_1時），它將被隱藏。唯一真正的缺點是，爲了隱藏第二個div，你必須首先將其移動。

事情是這樣的：

jQuery('#div_2').hide(); 
jQuery('#div_1').mouseover(function() { 
    jQuery('#div_2').fadeIn(); 
}); 
jQuery('#div_2').mouseout(function(){ 
    jQuery('#div_2').fadeOut(); 
});

來源

2010-03-08 20:42:46 Aaron

這裏的另一種方法，只適用懸停到第二個div也因此停止自身被隱藏：

$(function() { 
    $('#div_2').hide(); 
    $('#div_1, #div_2').hover(function() { 
     $('#div_2').stop().fadeIn(); 
    }, function(){ 
     $('#div_2').stop().fadeOut(); 
    }); 
});

來源

2010-03-08 23:31:46

當我在過去完成此操作時，可能會使後續淡入事件淡化爲僅部分不透明。相反，我使用http://api.jquery.com/fadeTo/，它允許我爲不透明度指定0和1。 – 2012-10-02 05:34:13

的鼠標離開功能可能是你正在找。

來源

2010-11-24 23:25:36 Roch

試試這個代碼：

$(function() { 
    jQuery('#div_2').hide(); 
    jQuery('#div_1').mouseover(function() { 
     jQuery('#div_2').fadeIn(); 
    }); 

    jQuery('#div_2').mouseout(function(){ 
     jQuery('#div_2').fadeOut(); 
    }); 
});

來源

2011-06-10 10:22:33

好主意，不要想那個:-)如果我再次需要它，我可以試試這個:-)謝謝！ – ahmet2106 2011-06-11 12:15:09

的jQuery的onmouseover +的onmouseout /在兩個不同的div懸停

回答

相關問題