jquery - 如何删除:点击后悬停在手机上
问题描述
我在我的网站上从这个 codepen实现了“滚动到顶部”箭头:
jQuery:
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
CSS:
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}
它在桌面上运行良好,但在手机屏幕上出现问题。当单击箭头并且屏幕滚动到顶部时,如果我们再次向下滚动,箭头将显示为 :hover 状态。
点击后如何“取消”悬停?
编辑:
这是一个显示问题的截屏视频:https ://streamable.com/5wr27
解决方案
由于:hover
当鼠标离开元素时您所指的状态会丢失,因此应用于该状态的所有样式也会丢失,从而将元素的样式恢复为原始样式。
这种行为不会发生在移动设备屏幕中,因为您必须用某些东西按下它,而不仅仅是将鼠标悬停在它上面。在这种情况下,元素保留按下它时应用的样式,而不是丢失它们(就像鼠标离开元素时会发生的那样)。
您所要做的就是手动将元素返回到之前的状态,可能是这样的:
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}
#return-to-top:not(:focus),
#return-to-top:not(:active) {
background: rgba(0, 0, 0, 0.7);
}
#return-to-top:not(:focus) i,
#return-to-top:not(:active) i {
top: 13px
}
/* Extra Things */
body {
background: #eee;
font-family: 'Open Sans', sans-serif;
}
h3 {
font-size: 30px;
font-weight: 400;
text-align: center;
margin-top: 50px;
}
h3 i {
color: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Test the scroll -->
<div style="height:2000px;">
<h3>Scroll down</h3>
<h3><i class="icon-arrow-down"></i>
</div>
您还可以查看此答案以仅将这些样式应用于移动设备。
推荐阅读
- javascript - 如何将两个对象与一个对象的某些属性和另一个对象的其他属性合并?
- twilio - Twilio 自动驾驶仪和金额
- linux - RH 6.1、7.4、7.6 ssh 中与用户相关的错误以及 LD_LIBRARY_PATH 和 openmpi mpiexec 的设置
- vba - 通过匹配访问表单中的两个字段来搜索表单
- java - Vertx 中的异步自定义方法
- flutter - 颤动轮播图像滑块在点击时打开单独的页面
- javascript - 有什么实用的方法可以在组件中调用“React.createContext()”吗?
- javascript - 从 Google 脚本中检索数据
- python - 如何将 OAuth1 与 aiohttp 一起使用
- python - 如何使用 Python Pandas 对数据框进行排序以匹配文件和发票金额