Я пытаюсь сделать кнопку так, чтобы, когда пользователь нажимает на нее, она меняет свой стиль, пока кнопка мыши удерживается. Я также хочу, чтобы он изменил свой стиль аналогичным образом, если его коснутся в мобильном браузере. Для меня казалось очевидным использовать псевдокласс CSS: active, но это не сработало. Я попробовал: focus, но тоже не вышло. Я попробовал: hover, и вроде сработало, но стиль сохранился после того, как я убрал палец с кнопки. Все эти наблюдения были на iPhone 4 и Droid 2.
Есть ли способ воспроизвести эффект в мобильных браузерах (iPhone, iPad, Android и, надеюсь, в других)? А пока я делаю что-то вроде этого:
<style type="text/css">
#testButton {
background: #dddddd;
}
#testButton:active, #testButton.active {
background: #aaaaaa;
}
</style>
...
<button type="button" id="testButton">test</button>
...
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
$("*").live("touchstart", function() {
$(this).addClass("active");
}).live("touchend", function() {
$(this).removeClass("active");
});
</script>
Псевдокласс: active предназначен для настольных браузеров, а активный класс - для сенсорных браузеров.
Мне интересно, есть ли более простой способ сделать это без использования Javascript.
hover
иmousedown
/ по-mouseup
разному, их сложно учесть.Ответы:
Нет такой вещи, как
:touch
в спецификациях W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors.:active
должно работать, я думаю.Порядок в псевдоклассе
:active
/:hover
важен для его правильной работы.Вот цитата из указанной выше ссылки
Интерактивные пользовательские агенты иногда изменяют рендеринг в ответ на действия пользователя. CSS предоставляет три псевдокласса для общих случаев:
источник
:active
псевдокласс. Он должен работать, но в некоторых браузерах вам нужен небольшой хак , чтобы заставить его работать: присоединить обработчик события кtouchstart
событию на теле (например:<body ontouchstart="">
)Поскольку мобильный телефон не дает обратной связи при наведении курсора, я как пользователь хочу видеть мгновенную обратную связь при нажатии на ссылку. Я заметил, что
-webkit-tap-highlight-color
это самый быстрый ответ (субъективно).Добавьте следующее в свое тело, и ваши ссылки будут иметь эффект касания.
источник
-webkit-tap-highlight-color
- нестандартная функция CSS , которую я использую:active
вместо этого, она действительно подходит и имеет смысл.У меня возникли проблемы с оформлением кнопок мобильного сенсорного экрана. Это исправит ваши проблемы с джойстиком / активной кнопкой.
body, html { width: 600px; } p { font-size: 20px; } button { border: none; width: 200px; height: 60px; border-radius: 30px; background: #00aeff; font-size: 20px; } button:active { background: black; color: white; } .delayed { transition: all 0.2s; transition-delay: 300ms; } .delayed:active { transition: none; }
<h1>Sticky styles for better touch screen buttons!</h1> <button>Normal button</button> <button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button> <p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p> <p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>
источник