悬停在移动 Safari 中答案

【问题标题】：hover in mobile safari悬停在移动 Safari 中
【发布时间】：2022-01-25 23:42:47
【问题描述】：

我尝试为 CSS 中的一个按钮添加悬停效果。我将构建一个带有移动 safari 的应用程序。我使用贝克框架来做到这一点。 Baker 框架使用移动 safari 的引擎。我创建了悬停，它适用于 chrome、firefox、opera，但不适用于 ipad 预览。你知道有什么问题吗？这是我的代码：

.slidebutton {
    position:absolute;
    width: 50px;
    height: 50px;
    top: 0%;
    background-color: white;
    left:974px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
    clear:both;
    }
.slidebutton:hover {

    width: 150px;
    height: 50px;
    top: 0%;
    background-color: white;
    left:874px;
    clear:both;
    display: inline;
    }

谢谢！

【问题讨论】：

标签： css hover mobile-safari

【解决方案1】：

最近在一个网站上遇到了同样的问题：

//jQuery code
$(".slidebutton").hover(function(){ // this block is strickly to enable our hover effect on mobile ios
    $(this).addClass('active');
},function(){
    $(this).removeClass('active');
});

那么您只需将 .slidebutton.active 添加到您的 css 中：

.slidebutton:hover, .slidebutton.active {

【讨论】：

【解决方案2】：

好的，我用 Safari 进行了测试，它可以正常工作（使用 Mac）。

在 iPhone 上使用 Safari 不是...你必须使用 Javascript；试试这个：

$('.slidebutton').mouseover(function(event) {
    //apply the css property
}).mouseout(function(event) {
    //apply the css property (reverse)
});

【讨论】：

在这种情况下，我使用了 jQuery，所以你应该在你的项目中也包含 jQuery！
感谢您的回答！

【解决方案3】：

我用这个来解决这个问题：

$(document).delegate(this.classWithHoverState,eventHover,function(e){
            if(e.type=='mouseenter' || e.type=='touchstart'){
                $(this).addClass('hover');
            }else{
                $(this).removeClass('hover');
            }
        })

然后只需添加一个 .hover 类

【讨论】：

【解决方案4】：

根据webonomic，有一个简单但奇怪的解决方案：将ontouchmove/ontouchstart/ontouchend（作为布尔值）属性添加到<html> 或<body>。

例子：

<!DOCTYPE html>
<html>
……
<body ontouchmove>
    ……
</body>
</html>

注意：原帖还建议onclick 和tabindex='0'，但它不适用于iPhone 6 / iOS 12.5.5。（作者2019年在iPhone 11上测试过）

【讨论】：