移动鼠标并保留 .mouseenter 功能

Question

这是我第一次用 jQuery 创作东西，所以我真的很兴奋。我做了一件小事，您可以将鼠标悬停在艺术家姓名上并查看可用的音乐会。

真为自己感到骄傲，但我现在希望能够将光标移动到日期（也许稍后我会为它们创建一个 link），但是如果我移动鼠标在大广场外，然后 .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() 切换您悬停的 .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);}

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

移动鼠标并保留 .mouseenter 功能

Moving mouse and keep .mouseenter function

html

css

jquery

mouseenter

mouseleave