JQuery jeder und auf Methoden nicht funktioniert

Question

Das Ziel ist einfach. Wenn Sie den Mauszeiger über mydiv (grau) halten, sollte das Kind div von inner erscheinen. Ich versuche Code dafür zu schreiben, aber das Beste, was ich mir vorstellen kann, ist, alle inneren Divs zu zeigen. Nur das innere div des Kindes sollte erscheinen. Bitte helfen Sie mir mit dem Code für diese, ich es zu schätzen wissen, danke :)

https://jsfiddle.net/wyeqgfjz/#&togetherjs=6wNtokkegm

HTML:

<div class="mydiv"> 
    <div class="inner"></div> 
</div> 

<div class="mydiv"> 
    <div class="inner"></div> 
</div> 

CSS:

.mydiv { 
    background: #ccc; 
    padding: 40px; 
    margin-bottom: 40px; 
} 

.inner { 
    background: red; 
    padding: 40px; 
} 

jQuery:

var inner = $('.mydiv .inner'), 
    mydiv = $('.mydiv'); 
inner.hide(); 
mydiv.each(function() { 
    $(this).on('hover', function() { 
    $(this).find(inner).toggle(); 
    }); 
}); 

Answer 1

Es gibt kein hover Ereignis, die gewünschten Ereignisse sind stattdessen mouseenter und mouseleave.
jQuery hat jedoch eine hover() Methode, die die Ereignisse für Sie kombiniert.

Beachten Sie, dass Sie keine Schleife verwenden müssen, iQuery wird intern für Sie iteriert.

var inner = $('.mydiv .inner'), 
 
    mydiv = $('.mydiv'); 
 
    
 
inner.hide(); 
 

 
mydiv.hover(function() { 
 
    $(this).find(inner).toggle(); 
 
});

.mydiv { 
 
    background: #ccc; 
 
    padding: 40px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.inner { 
 
    background: red; 
 
    padding: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div> 
 

 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div>

Answer 2

Keine Notwendigkeit Skript für diese überhaupt zu benutzen. Kann es nicht allein mit CSS unter Verwendung :hover Pseudo-Selektor

.mydiv { 
 
    background: #ccc; 
 
    padding: 40px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.inner { 
 
    background: red; 
 
    padding: 40px; 
 
    display:none; 
 
} 
 

 
.mydiv:hover .inner { 
 
    display:block 
 
}

<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div> 
 

 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div>