Javascript 返回顶部元素在触摸操作系统上保持悬停状态

我在页面上有一个返回顶部的元素，用css来定义它，用html来调用它，用js来执行元素淡入，然后单击页面时向上滚动，然后元素淡出

在任何桌面浏览器上，一切正常。问题是，在任何触摸设备（iOS、Android等，以及模拟器）上，在第一次触摸后，元素在淡出后仍保持亮起状态（我的意思是使用悬停设置），当元素消失以及在下一次滚动后再次出现时，元素也保持亮起状态

代码如下：

<style>

#back2Top {
    width: 38px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 25px;
    right: 0;
    background-color: #ff8400;
    color: #006c8b;
    font-family: Digit;
    font-size: 30px;
    padding-left: 3px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px 0px 0px 5px; 
}

#back2Top:hover {
    background-color: #006c8b;
    color: #ff8400;
}

</style>

<a id="back2Top" href="#">m</a>

<script>

$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});

$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });
});

</script>

#back2Top{
宽度：38px；
线高：40px；
溢出：隐藏；
z指数：999；
显示：无；
光标：指针；
位置：固定；
底部：25px；
右：0；
背景色：#ff8400；
颜色：#006c8b；
字体系列：数字；
字体大小：30px；
左：3倍；
文本对齐：居中；
文字装饰：无；
边界半径：5px 0px 0px 5px；
}
#back2Top：悬停{
背景色：#006c8b；
颜色：#ff8400；
}
$（窗口）。滚动（函数（）{
var height=$（window.scrollTop（）；
如果（高度>100）{
$（'#back2Top'）.fadeIn（）；
}否则{
$（“#back2Top”）.fadeOut（）；
}
});
$（文档）.ready（函数（）{
$（“#back2Top”）。单击（函数（事件）{
event.preventDefault（）；
$（“html，body”）.animate（{scrollTop:0}，“slow”）；
返回false；
});
});

---

如何成为解决方案？

在媒体查询中包装

：悬停

。这可防止触摸时触发

：悬停

@media (hover: hover) {
    #back2Top:hover {
        background-color: #006c8b;
        color: #ff8400;
    }
}

尝试使用变通方法，但这不是最初的想法。添加了以下js代码：

$(document).ready(function() {
    $("#back2Top").mouseout(function(){
        $("#back2Top").css("background-color", "#ff8400");
        $("#back2Top").css("color", "#006c8b");
    });
});

欢迎发表任何评论

不管怎样，我的解决办法。。。不起作用：（
它应该起作用。这里有一个小问题：看不到你的JSFIDLE。在浏览器上它不起作用。在iOS和Android上都不起作用。不，我很粗心……我把css
#back2Top:hover{background color:#006c8b；color:#ff8400；}
也放在了媒体查询之外。删除了，现在它起作用了，所以你是对的，Sev。