1

我尝试在 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;
    }

谢谢！

4

4 回答 4

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 {
于 2013-08-09T05:03:39.463 回答
0

我用它来解决这个问题：

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

然后只需添加一个 .hover 类

于 2014-11-27T11:11:18.013 回答
0

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

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

$('.slidebutton').mouseover(function(event) {
    //apply the css property
}).mouseout(function(event) {
    //apply the css property (reverse)
});
于 2013-08-09T00:24:59.257 回答
0

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

例子：

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

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

于 2022-01-21T08:59:44.370 回答