Mobilde Hover Simule Etmek
Mobilde aslında hover özelliği olan bir şeye dokunduktan sonra bıraktığımızda basılı kalıyordu. Bir projemde bu özelliğin önüne geçip kullanıcıya mobil uygulama hissiyatı kazandırmak için bu sıkıntıyı çözmem gerekiyordu.
Stackoverflow’da çözümünü buldum.
jQuery
$(document).ready(function () {
// .hover elementine dokunulduğunda o elemente hover_effect classını uygula
$('.hover').on('touchstart touchend', function (e) {
$(this).toggleClass('hover_effect');
});
});
Ama sonra sadece yukarıdaki kodu çalıştırınca elementin üzerinde scroll yapmakta zorlandığımı farkettim ve aşağıdaki kodu da ekledim.
Yine document.ready içine ekledim;
$(document.body).on("touchmove", function (event) {
event.preventDefault();
event.stopPropagation();
});
CSS
.hover {
-webkit-user-select: none; /* basılı tutulduğu zaman elemanları seçili hale getirmemesi için */
-webkit-touch-callout: none; /* iOS cihazlarda basılı tutup bir kaç saniye bekletildiğinde bağlantı hakkında info çıkartmaması için */
}
.element.hover_effect {
/* hover olduğunda olacak şeyler */
}