1

css で 1 つのボタンにホバー効果を追加しようとしています。モバイルサファリでアプリを構築します。私はそれを行うためにベイカーフレームワークを使用しています。ベイカー フレームワークは、モバイル サファリのエンジンを使用します。ホバーを作成しましたが、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');
});

次に、cssに.slidebutton.activeを追加するだけです。

.slidebutton:hover, .slidebutton.active {
于 2013-08-09T05:03:39.463 に答える
0

OK、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 に答える