:активный псевдо-класс не работает в мобильном Safari

Question

:активный псевдо-класс не работает в мобильном Safari

в Webkit на iPhone / iPad / iPod, указав стиль для: активный псевдокласс для <a> тег не срабатывает при нажатии на элемент. Как я могу заставить это сработать? Пример кода:

<style> 

a:active { 

    background-color: red;

}

</style>

<!-- snip -->

<a href="#">Click me</a>

757 11

css iphone mobile-safari webkit pseudo-class

11 ответов:

Comments

Ничего не найдено.

wilsonpage · Accepted Answer · 2015-04-08 03:16:34

<body ontouchstart="">
    ...
</body>
применяется только один раз, в отличие от каждого элемента кнопки, казалось, исправить все кнопки на странице. В качестве альтернативы вы можете использовать эту небольшую библиотеку JS под названием'Fastclick'. Он ускоряет события щелчка на сенсорных устройствах и также заботится об этой проблеме.

Jesse Rusak · Accepted Answer · 2012-01-16 12:13:42

добавьте обработчик событий для ontouchstart в тег . Это заставляет CSS волшебно работать.
<a ontouchstart="">Click me</a>

user128216 · Accepted Answer · 2018-10-05 23:05:40

как и другие ответы, iOS Safari не запускает :active псевдо-класс, если событие касания не прикреплено к элементу, но до сих пор это поведение было "волшебным". Я наткнулся на эту маленькую рекламу на Библиотека Разработчика Safari это объясняет его (акцент мой):
вы также можете использовать -webkit-tap-highlight-color свойство CSS в сочетании с установкой события касания для настройки кнопок, чтобы вести себя подобно рабочему столу. на iOS, мышь события отправляются так быстро, что состояние down или active никогда не принимается. таким образом,:active псевдостат срабатывает только при наличии сенсорного события, установленного на HTML-элементе-например, когда ontouchstart установлен на элементе следующим образом:
<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>
теперь, когда кнопка нажата и удерживается на iOS, кнопка изменяется на указанный цвет без появления окружающего прозрачного серого цвета.
другими словами, установка ontouchstart событие (даже если оно пустое) явно указывает браузеру реагировать на события касания.

на мой взгляд, это ошибочное поведение, и, вероятно, восходит к тому времени, когда "мобильный" веб был в основном несуществующим (взгляните на эти скриншоты на связанной странице, чтобы увидеть, что я имею в виду), и все было ориентировано на мышь. Интересно отметить, что другие, более новые мобильные браузеры, такие как на Android, отображают псевдо-состояние": active " на ощупь просто отлично, без каких-либо хаков как и то, что нужно для iOS.

(Side-note: если вы хотите использовать свои собственные стили на iOS, вы также можете отключить серый полупрозрачный ящик по умолчанию, который iOS использует вместо :active псевдо-состояние с помощью -webkit-tap-highlight-color свойства CSS, как описано в вышеуказанной ссылке.)

после некоторых экспериментов, ожидаемое решение установки ontouchstart событие <body> элемент все нажмите события, то пузырь не работает полностью. Если элемент отображается в окне просмотра при загрузке страницы, то он работает нормально, но прокрутка вниз и нажатие элемента, который был вне окна просмотра, делает не триггер :active псевдо-состояние, как и должно быть. Итак, вместо
<!DOCTYPE html>
<html><body ontouchstart></body></html>
прикрепите событие ко всем элементам вместо того, чтобы полагаться на событие, пузырящееся до тела (используя jQuery):
$('body *').on('touchstart', function (){});
однако я не знаю о последствиях этого для производительности, поэтому остерегаться.

EDIT: в этом решении есть один серьезный недостаток: даже прикосновение к элементу при прокрутке страницы активирует :active псевдо государства. Чувствительность слишком сильна. Android решает эту проблему, вводя очень небольшую задержку перед отображением состояния, которое отменяется, если страница прокручивается. В свете этого, я предлагаю использовать только на отдельных элементах. В моем случае, я разрабатываю веб-приложение для использования в области, которая является в основном список кнопок для навигации по страницам и отправки действий. Потому что вся страница в значительной степени кнопки в некоторых случаях, это не будет работать для меня. Однако вы можете установить :hover псевдо-состояние, чтобы заполнить для этого вместо этого. После отключения серого поля по умолчанию, это работает отлично.

tahdhaze09 · Accepted Answer · 2012-01-16 12:12:23

вы используете все псевдо-классы или только один? Если вы используете по крайней мере два, убедитесь, что они находятся в правильном порядке или все они ломаются:
a:link
a:visited
a:hover
a:active
..в таком порядке. Кроме того, если вы просто используете :active, добавьте ссылку:, даже если вы ее не стилизуете.

Redeye · Accepted Answer · 2015-05-18 14:02:56

//hover for ios
-webkit-tap-highlight-color: #ccc;
это работает для меня, добавьте в свой CSS элемент, который вы хотите выделить

Ali · Accepted Answer · 2017-05-23 14:55:10

по состоянию на 8 декабря 2016 года, принятый ответ (<body ontouchstart="">...</body>) не работает для меня на Safari 10 (iPhone 5s): этот хак работает только для тех элементов, которые были видны при загрузке страницы.

впрочем, добавив:
<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>
до head работает так, как я хочу, с недостатком, что теперь все события касания во время прокрутки также вызывают :active псевдо-состояние на затронутых элементах. (Если это проблема для вас, вы можете рассмотреть FighterJet это:hover обход.)

dhqvinh · Accepted Answer · 2016-12-19 08:52:27

этой у меня работает:
document.addEventListener("touchstart", function() {},false);
Примечание: Если вы делаете этот трюк, также стоит удалить цвет по умолчанию tap–highlight Mobile Safari применяется с помощью следующего правила CSS.
html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

dmitrizzle · Accepted Answer · 2017-03-19 06:49:47

Я опубликовал инструмент, который должен решить эту проблему для вас.

на поверхности проблема выглядит простой, но на самом деле поведение touch & click должно быть настроено довольно широко, включая функции тайм-аута и такие вещи, как "что происходит при прокрутке списка ссылок" или "что происходит при нажатии ссылки, а затем переместить мышь/палец от активной области"

Это должно решить все сразу: https://www.npmjs.com/package/active-touch

вам нужно будет либо иметь свой :активные стили назначены .активный класс или выберите свое собственное имя класса. По умолчанию скрипт будет работать со всеми элементами ссылки, но вы можете перезаписать его своим собственным массивом селекторов.

честная, полезная обратная связь и вклад очень ценится!

wasthishelpful · Accepted Answer · 2018-03-03 15:36:04

решение состоит в том, чтобы полагаться на :target вместо :active:
<style> 
a:target { 
    background-color: red;
}
</style>

<a id="click-me" href="#click-me">Click me</a>
стиль будет срабатывать, когда якорь нацелен на текущий url, который является надежным даже на мобильном телефоне. Недостатком является то, что вам нужна другая ссылка, чтобы очистить якорь в url. Полный пример:
a:target { 
    background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>

Liang · Accepted Answer · 2016-10-28 08:18:20

нет 100% связанных с этим вопросом, но вы можете использовать css sibling hack для достижения этой цели, а также

HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
    &:checked + label {
      background-color: red;
    }
  }
Если вы хотите использовать чистый html / css tooltip
span {
  display: none;
}
input {
    &:checked ~ span {
      display: block;
    }
  }

TroyM · Accepted Answer · 2012-11-27 18:28:24

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">

<title></title>

<style>
        a{color: red;}
        a:hover{color: blue;}
</style>
</head>

<body>

        <div class="main" role="main">
                <a href="#">Hover</a>
        </div>

</body>
</html>