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

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

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

С стилем:

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

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

Ответ 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>

Ответ 2

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

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

Ответ 3

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

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

.mm {
    cursor: pointer;
}

Ответ 4

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

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

mobileHover();

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Назначение прослушивателя событий целевому элементу, похоже, работает. (Работает с 'click', по крайней мере.) CSS hover на ios работает только в том случае, если назначен прослушиватель событий
Также, похоже, работает обтекание целевого элемента в [href= тривиальный]. fooobar.com/questions/261964/...

Соответствующая записка/диаграмма для мобильного алгоритма Safari для обработки кликов и других событий приведена здесь: Можно ли игнорировать псевдоклас: hover для пользователей iPhone/iPad?

Ответ 8

В ответ на Dan (fooobar.com/questions/261963/...) я бы рекомендовал слегка измененную версию.

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

Ответ 9

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

Я обнаружил, что для включения эффекта :hover для каждого типа элементов в браузере с поддержкой касания вам нужно сказать ему, что ваши элементы доступны для клика. Для этого вы можете просто добавить пустой обработчик функции щелчка с помощью 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(){ });
}

Ответ 10

Здесь очень небольшое улучшение ответа user1387483 с использованием непосредственной функции:

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

Кроме того, я согласен с Boz в том, что это, по-видимому, "самое аккуратное, наиболее совместимое решение".

Ответ 11

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

JQuery

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

Ответ 12

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

Исходный код:

#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;
}