jQuery：鼠標懸停DIV效果

道歉爲我的問題的新手，我仍然習慣於jQuery。我希望做最簡單的效果。我在很多不同的網站上看到的一個。基本上只是當鼠標懸停在電子郵件上時，文本出現在其上方。jQuery：鼠標懸停DIV效果

我試圖做一些使用jsFiddle的東西，但它並不像我期望的那樣行事。你可以看到效果，我去爲，雖然：http://jsfiddle.net/5dyrJ/

$(function() { 
    $('#main').on("mouseover", function(){ 
     $("#slider").animate({"right":"-30%"}, "slow"); 
    }).on("mouseout", function(){ 
     $("#slider").animate({"right":"-99%"}, "fast"); 
    }); 
});

能有人請解釋如何有效地獲得這種效果呢？

來源

2013-07-12 Chuck Le Butt

下面是如何 - > http://jsfiddle.net/5dyrJ/2/ – adeneo

或者沒有的JavaScript在所有 - > http://jsfiddle.net/5dyrJ/5/ – adeneo

@ adeneo，+1純CSS解決方案 – KyleMit

問題：

您當前的問題的原因是mouseover()/mouseout()將觸發進入/離開子元素。

解決方案：

你會使用mouseenter()和mouseleave()相反在這種情況下（或簡寫hover()）：

$(function() { 
    $('#main').on("mouseenter", function(){ 
     $("#slider").animate({"right":"-30%"}, "slow"); 
    }).on("mouseleave", function(){ 
     $("#slider").animate({"right":"-99%"}, "fast"); 
    }); 
});

Your jsFiddle here.

爲什麼這項工作？

這是可行的，因爲mouseenter()/mouseout()在進入/離開子元素時不會觸發。 Here is a great example jsFiddle顯示mouseover/mouseenter之間的差異。

另請注意，如他的jsFiddle中所示的@adeneo，您的示例實際上可以通過將transitions和:hover狀態組合使用CSS來完成。

來源

2013-07-12 19:27:53 lifetimes

啊，謝謝。是否因爲出現'＃滑動條'時鼠標指針不是「over」'＃main'？ –

@DjangoReinhardt希望該更新有助於:) – lifetimes

輝煌，謝謝。我會記住未來。 –

試試這個：

$(function() { 
$('#main').on("mouseover", function(){ 
    $("#slider").animate({"right":"-30%"}, "slow"); 
}).on("mouseleave", function(){ 
    $("#slider").animate({"right":"-99%"}, "fast"); 
}); 
});

希望這有助於！

來源

2013-07-12 19:31:59

嘗試使用.hover()

說明：描述：綁定兩個處理程序的匹配元素，當鼠標指針進入和離開元件被執行。

$(function() { 
    $('#main').hover(function() { 
     $("#slider").animate({"right":"-30%"}, "slow"); 
    }, function(){ 
     $("#slider").animate({"right":"-99%"}, "fast"); 
    }); 
});

JSFiddle

來源

2013-07-12 19:32:43 Praveen

jQuery：鼠標懸停DIV效果

回答

相關問題