jQuery：單擊后取消綁定懸停

Question

這是我的代碼。 單擊全屏中的“查看其他”按鈕，不移動光標一秒鍾，然后單擊“顯示更少”按鈕，不移動光標。 不同之處在於，第一種情況下行為正常。 在第二種情況下，您可以看到懸停狀態，直到您移動光標為止。 那么如何擺脫這種影響並解除懸停狀態的綁定呢？

 jQuery(document).ready(function($) { var list = $(".partners__wrap .partner"); var numToShow = 4; var button = $(".partners__button__a"); var numInList = list.length; var isShowing = true; list.hide(); if (numInList > numToShow) { button.show(); } list.slice(0, numToShow).show(); button.click(function() { var showing = list.filter(':visible').length; if (isShowing) { list.slice(showing - 1, showing + numToShow).fadeIn(500); onFadeComplete(); } else { list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete); } }); function onFadeComplete() { var nowShowing = list.filter(':visible').length; if (nowShowing == numInList && isShowing) { isShowing = false; button.text("Show less"); } else if (isShowing) { button.text("Show more"); } if (nowShowing == numToShow) { button.text("See other"); isShowing = true; } } }); 

 .partners__button { text-align: center; padding-top: 16px; } .partners__button__a { -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; font-family: Arial; color: #ff4e50; font-size: 14px; background: #fff; padding: 10px 26px 10px 26px; text-decoration: none; border: 2px solid #ff4e50; font-weight: bold; outline: none; cursor: pointer; } .partners__button__a:hover { background-color: #3cb0fd; border-color: #3cb0fd; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="partners"> <h2 class="partners__h2" id="find">Headline</h2> <div class="partners__wrap"> <div class="partner__1 partner"> <div class="partner__pic__wrap"> <div class="partner__1__icon partner__icon"></div> <a class="partner__1__pic partner__pic__hover" href="#"></a> </div> <div class="partner__wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__pic__wrap"> <div class="partner__2__icon partner__icon"></div> <a class="partner__2__pic partner__pic__hover" href="#"></a> </div> <div class="partner__wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__3 partner"> <div class="partner__pic__wrap"> <div class="partner__3__icon partner__icon"></div> <a class="partner__3__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__4 partner"> <div class="partner__pic__wrap"> <div class="partner__4__icon partner__icon"></div> <a class="partner__4__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__5 partner"> <div class="partner__pic__wrap"> <div class="partner__1__icon partner__icon"></div> <a class="partner__1__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__6 partner"> <div class="partner__pic__wrap"> <div class="partner__2__icon partner__icon"></div> <a class="partner__2__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__7 partner"> <div class="partner__pic__wrap"> <div class="partner__3__icon partner__icon"></div> <a class="partner__3__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> <div class="partner__8 partner"> <div class="partner__pic__wrap"> <div class="partner__4__icon partner__icon"></div> <a class="partner__4__pic partner__pic__hover" href="#"></a> </div> <div class="partner_wrap"> <h4 class="partner__name">Title</h4> <p class="partner__description">Text. And Text.</p> </div> </div> </div> </div> <div class="partners__button"> <button class="partners__button__a">See other</button> </div> 

Answer 1

也可以在Edge中工作...如果您從顯示更改為隱藏，則按鈕會移動，所以我不知道懸停狀態不會改變嗎？

您是說按鈕在同一位置停留半秒鍾而不會改變的效果嗎？