在具有相同類別的一組div中將鼠標懸停在單個div上顯示覆蓋

Question

假設我有4個動態生成的div，每個div具有相同的類，並且具有唯一的數字ID，就像這樣。 每個都包含一個絕對定位的div，其寬度和高度為100％，因此在顯示時，它會填充整個div。

<div class="my_class" id="1">
    <div class="overlay"></div>
</div>

<div class="my_class" id="2">
    <div class="overlay"></div>
</div>

<div class="my_class" id="3">
    <div class="overlay"></div>
</div>

<div class="my_class" id="4">
    <div class="overlay"></div>
</div>



<style>
    .overlay {
        display:none;
    }
</style>

當我將鼠標懸停在這些div之一上時，我想要那個div，而其他都不顯示該覆蓋，那么當我停止懸停時，該覆蓋div應該消失了。 關於如何使用jquery做到這一點的任何想法？ 這就是我嘗試過的。

$('document').ready(function(){
  $('.my_class').mouseenter(function(){
    var id = $(this).attr("id");
    $("#"+ id +" div").fadeTo("fast", 1);
    $("#"+ id +" div").mouseleave(function(){
      $("#"+ id +" div").fadeTo("fast", 0);          
    });
  });
});

Answer 1

里面mouseenter回調只是用$（本）.find到里面找到只有股利。

添加mouseleave回調中mouseenter回調是一個壞主意。 每次鼠標進入父div都會添加一個新的回調。

這是您要做什么？

http://jsfiddle.net/2R3Yt/

$('document').ready(function () {
    $('.my_class').mouseenter(function () {
        var id = $(this).attr("id");
        $(this).find("div").fadeTo("fast", 1);
    });

    $('.my_class').mouseleave(function () {
        $(this).find("div").fadeTo("fast", 0);
    });
});

Answer 2

id將其重寫為：

$('document').ready(function(){
 $('.my_class').mouseenter(function(){$(this).fadeTo("fast", 1);});
 $('.my_class').mouseleave(function(){$(this).fadeTo("fast", 0);});
});

您要連接的mouseleave里面mouseenter ，我想你不慣於說。

Answer 3

但是，原始代碼對我有用。 如果您在divs之間不規則地移動光標，則事件會不斷淡入和淡出疊加層。

為了解決這個問題，我取代了原來mouseenter和mouseleave事件有one這是類似on ，但只有一次的事件捕獲。

$('.my_class').one('mouseenter', function() {...});
$('.my_class').one('mouseleave', function() {...});

然后，我將mouseenter事件放入mouseleave以便在離開活動div之后可以繼續mouseleave進行hover效果。

http://jsfiddle.net/q8qFy/4/

如果您對僅CSS解決方案感興趣：

http://jsfiddle.net/EsVLC/1/

Answer 4

我認為此解決方案可能會更簡潔一些。 也要擺弄 。

$('.my_class').mouseenter(function() {
    $(this).children('.overlay').fadeTo(1000, 0);
})

$('.my_class').mouseleave(function() {
    $(this).children('.overlay').fadeTo(1000, 1);
})