Question

我尝试将悬停效果添加到css中的一个按钮。我将使用移动safari构建一个应用程序。我用baker框架来做。贝克框架使用移动野生动物园的引擎。我创建了悬停，它适用于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;
    }

谢谢！

Answer 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 {

Answer 2

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

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

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

Answer 3

我用它来解决这个问题：

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

然后只需添加.hover类

悬停在移动野生动物园

3 个答案: