0
C'est la première fois que je crée quelque chose avec jQuery, alors je suis vraiment excité. J'ai fait cette petite chose où tu peux planer sur les noms d'artistes et voir les concerts disponibles.Déplacer la souris et conserver la fonction .mouseenter
Vraiment fière de moi-même, mais je voudrais maintenant pouvoir déplacer mon curseur sur les dates (et peut-être plus tard je vais créer un lien pour eux), mais si je déplace la souris en dehors du grand carré , alors .mouseleave s'active et baaam, c'est parti.
Comment est-ce que je devrais faire ceci?
Voici le code (le vol stationnaire ne fonctionne pas, je ne comprends pas pourquoi :()
$(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>Merci beaucoup à l'avance!
L'extrait de code semble fonctionner, à moins que je suis mauvaise compréhension du comportement attendu. – Goose
@Goose Je pense qu'il veut dire que lorsque vous survolez le menu déroulant développé pour sélectionner quelque chose, la liste déroulante disparaît à nouveau car "mouseleave" est déclenché pour le grand carré qui a activé la liste déroulante en premier lieu – myfunkyside
** Réponse: ** Je pense que vous pourriez faire les dates dropdown un enfant de la grande place, de cette façon, lorsque vous passez la liste déroulante, vous êtes toujours techniquement en train de survoler le grand carré et la liste déroulante ne s'effondrera pas jusqu'à ce que vous sortez). – myfunkyside