jquery的mouseenter和mouseleave問題

我有一個父div'A'，並在懸停div另一個div'B'將被顯示，這第二個div不是一個子div.It是一個單獨的div。絕對。jquery的mouseenter和mouseleave問題

在鼠標上留下'B'的第二個div，它應該消失。但它並沒有消失。實際上我不確定是否有可能，因爲當你離開第二個div時，你仍然是第一個div，這就是爲什麼mousenter函數仍然被觸發。

HTML代碼

<div class="portitem">Some content</div> 
<div class="overlaygallery"></div>

CSS

.portitem { 
    position:absolute; 
    width:200px; 
    height:200px; 
    background:#000; 
} 
.overlaygallery { 
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9); 
    height: 150px; 
    margin-left: 25px; 
    margin-right: 15px; 
    margin-top: 25px; 
    position: absolute; 
    width: 150px; 
    z-index: 999; 
    display:none; 
}

jQuery的

$('.portitem').mouseover(function() { 
    $('.overlaygallery').css("display", "block"); 

}); 

$(".overlaygallery").mouseleave(function() { 
    $(this).css("display", "none"); 
});

我創建了一個小提琴。這是http://jsfiddle.net/squidraj/Gyn8c/

有沒有其他的tricks.Please建議。提前感謝。

來源

2013-08-17 Prithviraj Mitra

這是一個非常奇怪的行爲，你正在尋找。這可能是一個小小的JS技巧，但你確定你需要這種確切的行爲？ – Itay

除了使用'visibility'作爲第二個函數之外，我沒有看到任何其他的可能性，但沒有更改你的代碼 - http://jsfiddle.net/Gyn8c/3/ – Adrift

@Pithithraj Mitra：你爲什麼不讓他們父母和孩子？它會容易很多 – Itay

這裏是你想要的東西：http://jsfiddle.net/Gyn8c/11/

我不得不讓他們的父母兒童。它看起來一樣，並做你想要的。

$('.overlaygallery').mouseout(function() { 
    $(this).hide(); 
}); 

$('.portitem'). 
    mouseenter(function() { $('.overlaygallery').show(); }). 
    mouseleave(function() { $('.overlaygallery').hide(); });

來源

2013-08-17 12:20:23 Itay

輝煌！..請給我幾分鐘就明白了。這就是我想要的。 –

如果你離開overlaygallery並再次輸入它而不離開portitem，它將不會與此代碼一起顯示。 – Mahn

@italy ..你不覺得當我從外部div回到內部div時，它不會顯示內部div。 – Kasma

您可以使用jQuery的懸停功能，該功能需要2個參數，mouseenter要做什麼以及mouseleave要做什麼。它看起來像這樣，剩餘的邏輯可以放在這些函數中。

$（「＃ID」）懸停（函數（）{}，函數（）{}）

來源

2013-08-17 12:08:35

$('.portitem').hover(function() { 
    $('.overlaygallery').css("display", "block"); 
    },function() { 
    $('.overlaygallery').css("display", "none"); 
}); 

$('.overlaygallery').mouseout(function() { 
    $(this).hide(); 
});

來源

2013-08-17 12:13:44

閱讀所有這些討論的樣子，你需要證明格B時的鼠標是格B，然後用不透明的方式去，如果你是基於div可見執行任何操作或代碼的任何地方顯示。

$('.overlaygallery').hover(function() { 
    $(this).stop().animate({ 
     opacity: 1 
    }); 
}, 

function() { 
    $(this).stop().animate({ 
     opacity: 0 
    }); 
});

.portitem { position：absolute; width：200px; height：200px; 背景：＃000; }

.overlaygallery { 
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9); 
    height: 150px; 
    margin-left: 25px; 
    margin-right: 15px; 
    margin-top: 25px; 
    position: absolute; 
    width: 150px; 
    z-index: 999; 
    opacity :0; 
}

demo

來源

2013-08-17 12:24:38 Kasma

漂亮，但OP希望overlaygallery出現一旦鼠標交叉portitem，而不是overlaygallery直接。 – Mahn

感謝Kasma的想法。如果你看到ltay的解決方案，那就是我將要使用的。 –

有兩個問題與您的代碼：

隱藏要素不火mouseenter/mouseleave事件。要解決這個問題，可以使用不透明度改爲，它具有相當不錯的跨瀏覽器的支持，。
portitem鼠標懸停在overlaygallery鼠標離開後立即運行，因此當後者試圖隱藏自身portitem將再次證明這一點。您可以解決此使用的jQuery提供的EVENTDATA，特別是財產toElement。

這是一個有點冗長，不是很優雅，但它確實你是什麼之後，如果我理解正確：

var cancelMouseOver = false; 

$('.portitem').mouseenter(function (e) { 
    if(!cancelMouseOver) { 
     $('.overlaygallery').css("opacity", 1); 
    } else { 
     cancelMouseOver = false; 
    } 
}); 

$('.portitem').mouseleave(function (e) { 
    $('.overlaygallery').css("opacity", 0); 
}); 

$(".overlaygallery").mouseenter(function (e) { 
    $(this).css("opacity", 1); 
}); 

$(".overlaygallery").mouseleave(function (e) { 
    $(this).css("opacity", 0); 

    if($(e.toElement).hasClass("portitem")) { 
     cancelMouseOver = true; 
    } 
});

DEMO

你可能要重新考慮是否你需要明確這一點，也許更簡單的方法也會爲你所需要的做。

來源

2013-08-17 12:39:07 Mahn

感謝Mahn的想法。實際上，它現在已經使用@ ltay的解決方案進行了整理。如果你看到他的小提琴是我想要的那個。儘管如此，謝謝你的努力。 –

@PrithvirajMitra用他的方法，如果你離開黃色方塊並再次輸入它*沒有*離開黑盒子，它就不會再出現。你知道嗎？我的實現認爲，這就是爲什麼它有點冗長。 – Mahn

jquery的mouseenter和mouseleave問題

回答

相關問題