Merhaba bu gün sizlere css’de çokça kullandığımız :hover olayını mobile geldiğinde pasif olmasının çözümünü söyleyeceğim.
Yani css de artık js olmadan mobilden girildiğini algılayacak ve hover olayını mobilde de bariz bir şekilde görünecek
@media (hover: hover) {
/* ... */
}
Yukarıda gördüğünüz gibi @media etiketini kullanarak hover ın mobile de kullanılabilir olduğunu gördünüz. İkinci bir özellik ise desktopta hover olanı mobilde etkisiz hale getirmek onuda aşağıdaki kod bloğu ile yapabilirsiniz
@media (hover: none) {
/* ... */
}
Diğer bir özellik ise pointer özelliği, bu özelliği mobilde de değişik şekillerde gösterebilirsiniz. Aşağıdaki ince-kalın ve tamamen pointer özelliğini mobilde yok etme olaylarını gösteren kod bloklarını görebilirsiniz
@media (pointer: coarse) {
/* ... */
}
@media (pointer: fine) {
/* ... */
}
@media (pointer: none) {
/* ... */
}
Peki gelelim bu iki özelliği mobil cihazlarda eşleştirme olaylarına
/* smartphones, touchscreens */@media (hover: none) and (pointer: coarse) { /* ... */}
/* stylus-based screens */@media (hover: none) and (pointer: fine) { /* ... */}
/* Nintendo Wii controller, Microsoft Kinect */@media (hover: hover) and (pointer: coarse) { /* ... */}
/* mouse, touch pad */@media (hover: hover) and (pointer: fine) { /* ... */}