зависание в мобильном сафари

Question

Я пытаюсь добавить эффект зависания на одну кнопку в css. Я создам приложение с мобильным сафари. Для этого я использую систему 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

Хорошо, я проверил это с Safari и работает (с использованием Mac).

Использование Safari на iPhone не ... вы должны использовать Javascript; попробуйте это:

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

Answer 2

Столкнулся же вопрос на сайте в последнее время:

//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 3

I использовал это, чтобы обойти это:

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

А затем просто добавьте класс .hover