Moving mouse and keep .mouseenter function

Question

This is my first time creating something with jQuery, so I am really excited. I did this small thing where you can hover on artists names and see the concerts available.

Really proud of myself, but I'd like now to be able to move my cursor to the dates (and maybe later I'll create a link for them), but if I move the mouse outside of the big square, then .mouseleave activates and baaam, it's gone.

How should I do this?

Here's the code (the hover is not working, I don't understand why :()

$(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>

Thank you so much in advance!

Answer 1

Change the selector to .info so mouseenter is triggered on the parent element that wraps both of your elements. Then use $.find() to toggle the state of the children of the .info you're hovering.

$(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>