Bewegen der Maus und halten .mouseenter Funktion

Question

Das ist mein erstes Mal, etwas mit jQuery zu erstellen, also bin ich wirklich aufgeregt. Ich habe dieses kleine Ding gemacht, wo du auf Künstlernamen schweben und die verfügbaren Konzerte sehen kannst.

Wirklich stolz auf mich selbst, aber ich möchte jetzt in der Lage sein, meinen Cursor auf die Daten zu bewegen (und vielleicht später werde ich einen Link für sie erstellen), aber wenn ich die Maus außerhalb des großen Quadrats bewegen dann aktiviert .mouseleave und baaam, es ist weg.

Wie soll ich das tun?

Hier ist der Code (der Hover nicht funktioniert, ich verstehe nicht, warum :()

$(document).ready(function() { 
 
    
 

 
    $('show').hide(); 
 
    $('.alldates').hide(); 
 
    
 
    $('.band').mouseenter(function() { 
 
     $(this).fadeTo('fast',1); 
 
     $(this).next().show(200); 
 
    }); 
 
    
 
    $('.band').mouseleave(function() { 
 
     
 
     $(this).fadeTo('fast',0.5); 
 
     $(this).next().hide(200); 
 
    }); 
 
    
 
});

body { 
 
    font-family: 'Roboto'; 
 
    
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
    
 
} 
 

 
ul,li { 
 
    list-style-type: none; 
 
    list-style: none; 
 
} 
 

 

 

 
.band { 
 
    opacity: 0.5; 
 
    margin-top: 20px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content:center; 
 
    width: 240px; 
 
    height: 240px; 
 
    align-items: center; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2); 
 
    color: white; 
 
} 
 

 
.band p { 
 
    font-size: 20px; 
 
    font-weight: 500; 
 
} 
 

 
show { 
 
    font-size: 16px; 
 
} 
 

 
.alldates { 
 
    margin-top: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    height: 120px; 
 
} 
 

 
.date { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    border: solid 1px #95989A; 
 
    height: 52px; 
 
    align-items: center; 
 
    border-radius: 3px; 
 
    color:#95989A; 
 
} 
 

 
.band1 { 
 
    background-color: rgba(40,177,227,1); 
 
} 
 

 
.band2 { 
 
    background-color: rgba(227,40,52,1); 
 
} 
 

 
.band3 { 
 
    background-color: rgba(227,213,40,1); 
 
} 
 

 
.band4 { 
 
    background-color: rgba(0,0,0,1); 
 
} 
 

 
.band5 { 
 
    background-color: rgba(171,40,227,1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    
 
<div class="info"> 
 
    <div class="band band1"> 
 
    <p>All Time Low</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    <div class="info"> 
 
    <div class="band band2"> 
 
    <p>Johnny Cash</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    <div class="info"> 
 
    <div class="band band3"> 
 
    <p>30 Seconds to Mars</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    <div class="info"> 
 
    <div class="band band4"> 
 
    <p>Never Shout Never</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    <div class="info"> 
 
    <div class="band band5"> 
 
    <p>Miley Cyrus</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 

 
    
 
    
 
    
 
</div>

Vielen Dank im Voraus!

Answer 1

Ändern der Selektor .info also mouseenter wird auf das übergeordnete Element ausgelöst, das beide Elemente umschließt Dann verwenden Sie $.find(), um den Status der untergeordneten Elemente derumzuschaltendu schwebst.

$(document).ready(function() { 
 
    $('show').hide(); 
 
    $('.alldates').hide(); 
 
    
 
    $('.info').mouseenter(function() { 
 
     $(this).find('.band').fadeTo('fast',1); 
 
     $(this).find('.alldates').show(200); 
 
    }); 
 
    
 
    $('.info').mouseleave(function() { 
 
     $(this).find('.band').fadeTo('fast',0.5); 
 
     $(this).find('.alldates').hide(200); 
 
    }); 
 
});

body { 
 
    font-family: 'Roboto'; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
ul,li { 
 
    list-style-type: none; 
 
    list-style: none; 
 
} 
 

 
.band { 
 
    opacity: 0.5; 
 
    margin-top: 20px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content:center; 
 
    width: 240px; 
 
    height: 240px; 
 
    align-items: center; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2); 
 
    color: white; 
 
} 
 

 
.band p { 
 
    font-size: 20px; 
 
    font-weight: 500; 
 
} 
 

 
show { 
 
    font-size: 16px; 
 
} 
 

 
.alldates { 
 
    margin-top: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    height: 120px; 
 
} 
 

 
.date { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    border: solid 1px #95989A; 
 
    height: 52px; 
 
    align-items: center; 
 
    border-radius: 3px; 
 
    color:#95989A; 
 
} 
 

 
.band1 {background-color: rgba(40,177,227,1);} 
 
.band2 {background-color: rgba(227,40,52,1);} 
 
.band3 {background-color: rgba(227,213,40,1);} 
 
.band4 {background-color: rgba(0,0,0,1);} 
 
.band5 {background-color: rgba(171,40,227,1);}

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

 
<div class="container"> 
 
    
 
    <div class="info"> 
 
    <div class="band band1"> 
 
     <p>All Time Low</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="info"> 
 
    <div class="band band2"> 
 
     <p>Johnny Cash</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="info"> 
 
    <div class="band band3"> 
 
     <p>30 Seconds to Mars</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="info"> 
 
    <div class="band band4"> 
 
     <p>Never Shout Never</p> 
 
     <show>Show dates</show> 
 
    </div> 
 
    
 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="info"> 
 
    <div class="band band5"> 
 
     <p>Miley Cyrus</p> 
 
     <show>Show dates</show> 
 
    </div> 
 

 
    <div class="alldates"> 
 
     <div class="date"> 
 
     <li id="time">30 Oct 2017</li> 
 
     <li id="place">London</li> 
 
     </div> 
 
     <div class="date"> 
 
     <li id="time">2 Nov 2017</li> 
 
     <li id="place">Paris</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
</div>