Как я моделирую парение с касанием в сенсорных браузерах?
С некоторым HTML как это:
<p>Some Text</p>
Затем некоторый CSS как это:
p {
color:black;
}
p:hover {
color:red;
}
Как я могу позволить долгому касанию к сенсорному устройству копировать парение? Я могу изменить разметку/использование JS и т.д., но не могу думать о простом способе сделать это.
4 ответа
Хорошо, я разобрался! Это включает в себя небольшое изменение CSS и добавление JS.
Использование jQuery для упрощения:
$(document).ready(function() {
$('.hover').on('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
По-английски: когда вы начинаете или завершаете касание, включайте или выключайте класс hover_effect .
Затем в вашем HTML добавьте указатель на класс ко всему, с чем вы хотите, чтобы это работало. В вашем CSS замените любой экземпляр:
element:hover {
rule:properties;
}
на
element:hover, element.hover_effect {
rule:properties;
}
И просто для большей полезности добавьте это также в свой CSS:
.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
Чтобы браузер не просил вас скопировать / сохранить / выбрать изображение или что-то еще.
Легко!
Один из способов сделать это - создать эффект наведения при начале касания, а затем удалить эффект наведения при перемещении или завершении касания.
Это то, что Apple должна сказать о сенсорном управлении в целом, раз уж вы упомянули iPhone.
Я уверен, что без JS для конкретного устройства (а точнее, браузера) вам не повезло.
Edit: думал, что вы хотите избежать этого, пока я не перечитаю ваш вопрос. В случае Mobile Safari вы можете зарегистрироваться, чтобы получать все события касания, аналогично тому, что вы можете делать с помощью собственных UIView-ов. Не могу найти документацию прямо сейчас, но постараюсь.
Чтобы ответить на ваш главный вопрос: «Как имитировать наведение касанием в браузерах с сенсорным экраном?»
Просто разрешите «щелкнуть» элемент (нажав на экран), а затем активируйте hover с использованием JavaScript.
var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
// Trigger the `hover` event on the paragraph
p.onhover.call(p);
};
Это должно работать, пока на вашем устройстве есть событие hover (даже если оно обычно не используется).
Обновление: Я только что протестировал эту технику на своем iPhone, и, похоже, она работает нормально. Попробуйте здесь: http://jsfiddle.net/mathias/YS7ft/show/light/
Если вы хотите использовать «долгое касание» для запуска наведения вместо этого, вы можете использовать приведенный выше фрагмент кода как отправная точка и получайте удовольствие от таймеров и прочего;)