Entfernen der Klasse mit der Maus Beenden

Question

Ich bin auf Mouseenter/Mouselave mit jQuery durchführen und es scheint zu funktionieren, aber nicht, wenn ich das Div. Dies funktioniert nur, wenn ich das eigentliche Fenster verlasse.

Dies ist meine jQuery

$(document).ready(function() { 
    $(".pods .col").on("mouseenter", function() { 
    $(this).find(".pod-overlay").addClass("show") 
    }); 
    $(".pods .col").on("mouseleave", function() { 
    $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

Das ist mein HTML ist

<div id="splash" class="section section-splash bg"> 
    <div class="pods"> 
    <div class="col col-4"> 
     <div id="pod-splash-food" class="pod pod-food"> 
     <div class="pod-overlay"></div> 
     </div> 
    </div> 
    </div> 
</div> 

ich eine js Geige hier getan haben. Ich lerne jQuery, also wird Rat geschätzt.

http://jsfiddle.net/34h48148/

Answer 1

Ihre Funktion funktioniert einwandfrei! Das Problem ist die Überlagerung. Du platzierst das Absolute und lässt es den ganzen Körper bedecken. Also, ändern Sie Ihr CSS ein wenig, platzieren Sie .pods und .col relativ.

.pods,.col { overflow: auto; position: relative; } 

Updated Fiddle

Das einzige, was ich auf Ihre Funktion ändern würde, ist verbindlich beide Ereignisse am selben Anrufer:

$(document).ready(function() { 
    $(".pods .col").on("mouseenter", function() { 
     $(this).find(".pod-overlay").addClass("show") 
    }).on("mouseleave", function() { 
     $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

Answer 2

Sie auch hover Veranstaltung wie diese verwenden:

$(document).ready(function() { 
    $(".pods .col").hover(function() { 
    $(this).find(".pod-overlay").addClass("show") 
    }, function() { 
    $(this).find(".pod-overlay").removeClass("show") 
    }); 
}); 

Und das ist die hover event doc

---

Allerdings ist das Problem nicht die Funktion, aber die CSS zugeordnet die pod-overlay Klasse.
diese beiden Attribute in Ihrem CSS hinzufügen:

.pod-overlay { 
    width:260px; 
    height:260px; 
    ... 
} 

Answer 3

Sie reine css

.pods .col:hover .pod-overlay{ 
    visibility: visible; 
} 

.pods .col .pod-overlay{ 
    visibility: hidden; 
} 

Answer 4

Die eigentliche Mausereignis Sie ist Onmouseout

$(".pods .col").on("mouseout", function() { 
    $(this).find(".pod-overlay").removeClass("show") 
}); 

Answer 5

verwenden könnte

Ihre Methode aufrufen sollte sein ist in Ordnung, aber Sie es funktioniert nicht auf mouseleave ist, weil die Überlagerung auf .col und er ist nce mouseleave wird nie ausgelöst. Sie können pointer-events auch abgesehen von dem, was die anderen Antworten vorschlagen. So etwas wie dies

.pod-overlay { 
    pointer-events: none; 
    .... 
} 

Hier ist die aktualisierte Demo http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS: Ich habe die Grenze der Overlay nur die Overlay-Grenzen zu zeigen.

Answer 6

Actualy, der Code funktioniert, ist das Problem, dass Sie Stellen Sie die gerade auf die ".pods" -Klasse, die die ganze Seite abdecken ... So wird die gerade wird nur ausgelöst, wenn Sie die Seite

Answer 7

lernen jquery, so wird Beratung geschätzt.

jQuery nicht erforderlich, um die Anforderung zu erfüllen. Versuchen verwendet css Pseudoklasse :hover

.pod { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 
.pod-overlay { 
 
    display: none; 
 
    z-index: 2; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #fff; 
 
    background-color: rgba(255, 255, 255, .9) 
 
} 
 

 
.pods .col:hover .pod-overlay { 
 
    display:block; 
 
}

<div id="splash" class="section section-splash bg"> 
 
    <div class="pods"> 
 
     <div class="col col-4"> 
 
      <div id="pod-splash-food" class="pod pod-food"> 
 
       <div class="pod-overlay"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

jsfiddle http://jsfiddle.net/34h48148/11/