マウスを動かして.mouseenter機能を維持する

Question

これはjQueryで初めてのものです。とても興奮しています。私はこの小さなことをアーティスト名の上に置くことができ、利用可能なコンサートを見ることができました。

本当に自分自身を誇りに思っていますが、私はカーソルを日付に移動できるようになりました（そして後で私はそれらのリンクを作成します）が、大きな正方形の外にマウスを移動すると、そして、.mouseleaveが起動し、baaam、それがなくなった。

どうすればよいですか？ここで

コードです

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

は、事前にどうもありがとうございます（ホバーが動作していない、私は:(理由を理解していない）！

Answer 1

変更セレクタを.infoになるので、両方の要素をラップする親要素でmouseenterがトリガーされます。$.find()を使用して、の子の状態を切り替えます。あなたはホバリングしています。

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