Исправить CSS-зависание на iPhone/iPad/iPod

Question

Я хочу исправить эффект зависания на iOS (переход на событие касания), но у меня нет идеи. Позвольте мне объяснить это. У вас есть текст на странице:

<div class="mm">hello world</div> 

Со стилем:

.mm { color:#000; padding:15px; } 
.mm:hover { background:#ddd; } 

Хорошо, в Dekstop, если вы поместите курсор мыши на текст, который вы получите #ddd фон, верно? Но в iOS, если вы касаетесь текста, вы ничего не получаете, но если вы нажмете на него, он получит уродливый и липкий фон #ddd, что не очень приятно, и я хочу, чтобы пользователь получил эффект наведения, когда он касался этого текста (что-то вроде touchhevent, я думаю). Но я вижу, что некоторые веб-сайты исправлены так, как freemyappps.com или (пожалуйста, проверьте этот сайт ->D4F на вашем устройстве ios и прикоснитесь к чему-нибудь, чтобы увидеть эффект зависания, например, есть торт :)) Но как эти сайты исправили это? Как это можно исправить? Thanks

Answer 1

Вот базовое, успешное использование javascript hover на ios, которое я создал. http://jsfiddle.net/pizzaboy13/u7FL5/

Весь код из jsfiddle находится ниже, так как у вас не может быть ссылки на jsfiddle.net без кода.

Примечание: Я использовал jquery, который, надеюсь, хорошо для вас.

Javascript:

$(document).ready(function(){ 
    // Sorry about bad spacing. Also...this is jquery if you didn't notice allready. 
    $(".mm").hover(function(){ 
    //On Hover - Works on ios 
    $("p").hide(); 
    }, function(){ 
    //Hover Off - Hover off doesn't seem to work on iOS 
    $("p").show(); 
}) 
}); 

CSS:

.mm { color:#000; padding:15px; } 

HTML:

<div class="mm">hello world</div> 
<p>this will disappear on hover of hello world</p> 

Answer 2

Под псевдонимом hover работает только на iOS при применении к тегу ссылки. Они делают это, потому что на прикосновении сенсорного устройства нет наведения. Он больше похож на активный класс. Таким образом, они не могут иметь один, если только его ссылка не идет по причинам удобства использования. Измените свой div на тег ссылки, и у вас не будет проблем.

Answer 3

Я "не уверен, если это будет иметь огромное влияние на производительность, но это сделал у меня в прошлом:

var mobileHover = function() { 
    $('*').on('touchstart', function() { 
     $(this).trigger('hover'); 
    }).on('touchend', function() { 
     $(this).trigger('hover'); 
    }); 
}; 

mobileHover(); 

Answer 4

Добавить onclick = "" на все, что вы хотите, чтобы iOS распознал элемент с зависанием.

<div onclick="">Click Me!</div> 

Answer 5

Некоторые люди об этом не знают. Вы можете применить его на div:hover и работать на iPhone.

Добавьте следующий CSS к элементу с :hover эффект

.mm { 
    cursor: pointer; 
} 

Answer 6

OnClick = «» был очень темпераментным, когда я пытался его использовать.

Использование: активное css для событий крана; просто поместите это в ваш заголовок:

<script> 
    document.addEventListener("touchstart", function() {},false); 
</script> 

Answer 7

1. Назначение слушателя событий для целевого элемента, кажется, работает. (Работает с «щелчком», по крайней мере.) CSS hover on ios works only if an event listener is assigned

2. Обнаружить целевой элемент в a [href = тривиальный] также работает. https://stackoverflow.com/a/28792519/1378390

Связанная примечание/схема алгоритма на мобильном Safari для обработки кликов и другие события здесь: Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

Answer 8

В ответ на Dan (https://stackoverflow.com/a/20048559/4298604), я бы рекомендовал немного измененную версию.

<div onclick="void(0)">Click Me!</div>

Добавление "недействительным (0)" позволяет получить неопределенное элементарное значение, в отличие от "".

Answer 9

Я знаю, что это старый пост, уже ответил, но я нашел другое решение , не добавляя классы css или делая слишком много javascript, чем это действительно нужно, и я хочу поделиться им, надеясь, может кому-то помочь.

Я обнаружил, что для включения эффекта :hover для каждого типа элементов в браузере с поддержкой касания вам нужно сообщить ему, что ваши элементы: , clickable. Для этого вы можете просто добавить пустой обработчик функции click с помощью javascript или jQuery.

$('.need-hover').on('click, function(){ }); 

Это лучше, если вы делаете это только для мобильных браузеров с поддержкой этого фрагмента:

// check for css :hover supports and save in a variable 
var supportsTouch = (typeof Touch == "object"); 

if(supportsTouch){ 
    // not supports :hover 
    $('.need-hover').on('click', function(){ }); 
} 

Answer 10

На некоторых сайтах нужно использовать CSS «курсора: помощь». Только iOS это вызывало у меня много раздражения. Чтобы решить эту проблему, измените все параметры страницы на «курсор: указатель». Это подходит для меня.

JQuery:

if (/iP(hone|od|ad)/.test(navigator.platform)) { 
$("*").css({"cursor":"pointer"}); 
} 

Answer 11

Где я решил эту проблему, добавив атрибут видимость в коде CSS, он работает на моем website

Оригинальный код:

#zo2-body-wrap .introText .images:before 
 
{ 
 
background:rgba(136,136,136,0.7); 
 
width:100%; 
 
height:100%; 
 
content:""; 
 
position:absolute; 
 
top:0; 
 
opacity:0; 
 
transition:all 0.2s ease-in-out 0s; 
 
}

Фиксированный IOS код касания:

#zo2-body-wrap .introText .images:before 
 
{ 
 
background:rgba(136,136,136,0.7); 
 
width:100%; 
 
height:100%; 
 
content:""; 
 
position:absolute; 
 
top:0; 
 
visibility:hidden; 
 
opacity:0; 
 
transition:all 0.2s ease-in-out 0s; 
 
}

Answer 12

Вот очень небольшое улучшение ответа user1387483, используя непосредственную функцию:

(function() { 
    $("*").on('touchstart', function() { 
    $(this).trigger('hover') ; 
    }).on('touchend', function() { 
    $(this).trigger('hover') ; 
    }) ; 
})() ; 

Кроме того, я согласен с Боз, что это, кажется, быть «самым аккуратным, наиболее совместимым решением».