針對特定的分區

好吧，我想弄清楚它如何使用jQuery來找出當前選擇哪個div，突出顯示等，然後將代碼應用到該div。針對特定的分區

例如，我有三個排列在一起的div s。每個div有一個class的.box。在每個div內是另一個div，具有.overlay的等級。默認情況下，.overlay設置爲display: none;，但當我將鼠標滑過每個div時，我想覆蓋此div僅用於設置爲可見 - 其他所有div的覆蓋應該保持隱藏狀態。

看看，http://jsfiddle.net/j76s2/

我已經得到了JS以獲得覆蓋顯示當鼠標滾過div S，但它顯示了所有當你將鼠標移到任何div的覆蓋。我知道爲什麼會發生這種情況，但我無法解決的是如何讓代碼解決，只應顯示第一個div的覆蓋圖，當該div有鼠標懸停時，等等。

來源

2012-09-22 user1563944

可以使用.hover()事件它有兩個功能，一個用於hoverin，一個用於hoverout。然後，您可以使用this作爲當前懸停的.box元素的上下文來查找其中的.overlay，然後使用.hide()和.show()更改其可見性。

$(".box").hover(
    function(){$(this).find(".overlay").show()}, 
    function(){$(this).find(".overlay").hide()} 
);

工作演示：http://jsfiddle.net/jfriend00/wa5Bn/

您可能還喜歡用fadeIn()和這樣的：

$(".box").hover(
    function(){$(this).find(".overlay").stop(true, true).fadeIn(500)}, 
    function(){$(this).find(".overlay").stop(true, true).fadeOut(500)} 
);

工作演示：http://jsfiddle.net/jfriend00/4qeqm/

來源

2012-09-23 00:08:23 jfriend00

我添加了一個'fadeIn（）'/'fadeOut（）'選項。 – jfriend00

你只需要指特定的元素與this：

$(".box").mouseover(function(){ 
    $(".overlay", this).css({"display" : "block"}); 
}); 

$(".box").mouseleave(function(){ 
    $(".overlay", this).css({"display" : "none"}); 
});

這樣，你正在縮小選擇包含懸停的元素內.box元素。

另外，考慮使用.hide()和.show()而不是.css()。

來源

2012-09-22 23:57:53 moonwave99

http://jsfiddle.net/es5wH/ – undefined

''mouseleave''與'mouseenter''相反，而不是''mouseover'' ... – Stphane

@moonwav e99感謝您的幫助。爲什麼你會建議.hide（）和.show（）而不是.css（）？ – user1563944

您正在使用.overlay類更改所有元素的CSS。爲了影響您當前所在的鼠標，您應該使用$(this)來選擇當前元素，然後使用find()來查找其中包含的類。

$(".box").mouseover(function(){ 
    $(this).find(".overlay").css({"display" : "block"}); 
}); 

$(".box").mouseleave(function(){ 
    $(this).find(".overlay").css({"display" : "none"}); 
});

來源

2012-09-22 23:58:52 doublesharp

針對特定的分區

回答

相關問題