0
這是我第一次用jQuery創建東西，所以我非常興奮。我做了這個小東西，你可以在藝術家的名字上徘徊，並看到可用的音樂會。移動鼠標並保持.mouseenter功能
真的很自豪我自己，但我想現在能夠將光標移動到日期（也許以後我會爲它們創建一個鏈接），但是如果我將鼠標移動到大方塊的外面，然後.mouseleave激活並返回，它消失了。
我該怎麼做？
下面的代碼（懸停不工作，我不明白爲什麼:(）
$(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>非常感謝你提前！
的代碼片段似乎是工作，除非我誤解了預期的行爲。 – Goose
@Goose我認爲他意味着當您將鼠標懸停在展開的下拉菜單上選擇某項內容時，下拉菜單會再次消失，因爲首先啓動下拉菜單的大方塊觸發了「mouseleave」。 – myfunkyside
**答案：**我認爲你可以讓日期下降到大廣場的一個孩子，這樣，當你徘徊下拉時，你仍然在技術上徘徊在大廣場，下拉不會崩潰，直到你移出整個事物（廣場和下拉）。 – myfunkyside