这是我的代码。点击"查看其他"全屏按钮,不要将光标移动一秒钟,然后点击"显示更少"按钮,不要移动光标。不同的是,在第一种情况下,行为是正常的;在第二种情况下,您可以看到悬停状态,直到您移动光标。 那么如何摆脱这种影响并解除悬停状态?
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>
&#13;
答案 0 :(得分:0)
也在Edge工作...... 如果你从show变为hide,按钮会移动,所以我无法弄清楚悬停状态是否会改变?!
你的意思是效果,按钮在同一个地方停留半秒并且不会改变?