为什么在移动设备上，<div>点击涉及jQuery ( '#item‘).fadeOut()调用，’#item‘css保持其先前的悬停状态？
为什么在移动设备上，<div>点击涉及jQuery ( '#item‘).fadeOut()调用，’#item‘css保持其先前的悬停状态？
提问于 2018-07-08 03:38:08
我正在创建一个虚拟的返回顶部按钮，结果发现我对fadeOut()的jQuery调用在手机上的行为不同(问题的差异可以用任何桌面浏览器模拟器重现)。
源代码在这里：https://codepen.io/ehouarn-perret/pen/ZRgJXE
但基本上有以下设置(当文档准备就绪时，在jQuery速记中调用)：
window.setupBackToTopButton = function () {
function updateBackToTopButton() {
if ($(window).scrollTop() > 50) {
$('#back-to-top-button').fadeIn();
} else {
$('#back-to-top-button').fadeOut();
$('#back-to-top-button').blur();
}
}
$(window).on("scroll touchmove", updateBackToTopButton);
updateBackToTopButton();
$('#back-to-top-button').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
};带有一个包含以下CSS的按钮：
#back-to-top-button {
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
padding: 7px 12px 7px 12px;
background-color: #cc0c0c;
opacity: 0.5;
display: none;
z-index: 9999;
}
#back-to-top-button:hover {
-o-transition: 300ms;
-ms-transition: 300ms;
-moz-transition: 300ms;
-webkit-transition: 300ms;
transition: 300ms;
background-color: #9c0909;
opacity: 1;
}两次通话的不同之处在于，在移动/平板电脑版本上，保持悬停状态(即background-color: #9c0909;、opacity: 1)。
为什么会发生这种行为，有什么原因吗？
解决方案：
正如在公认的答案中提到的，这是由于触摸设备上的粘性行为，在阅读了这篇文章后，我决定在点击过程中利用touchstart事件。
更改此设置：
$('#back-to-top-button').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
}); 关于这个问题：
$('#back-to-top-button').on('click touchstart', onBackToTopButtonClick);这实际上是有意义的，因为触摸设备上的悬停状态会导致粘性。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-08 03:48:05
这是因为移动设备上的粘性悬停行为(这是一个众所周知的bug/行为)。你在其他任何地方触摸到的:hover状态都会消失。
只要谷歌“粘性悬停移动”找到一些解决方案。这是我找到的答案：https://stackoverflow.com/a/17234319/9591609
(我想你不应该费心了，就让它去吧。这是每个人都在做的事情)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51226420
复制相关文章
相似问题