移动鼠标并保持.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

将选择器更改为params.permit( :"stripeToken" … ，以便在包装两个元素的父元素上触发.info。然后使用mouseenter切换您正在悬停的$.find()子项的状态。

.info

$(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);}