Używam :hover aby wyświetlić menu nieprzezroczyste, gdy wskaźnik myszy najedzie na niego - oczywiście nie działa to na urządzeniach dotykowych. skrzypce pokazuje, co próbuję osiągnąć (przewiń w dół, aby zobaczyć przezroczystość). W moim pełnym przykładzie używam pól wyboru do rozwijania podmenu, co działa świetnie.
Oczywiście nie mogę „przechodzić” w górę za pomocą CSS, więc zaznaczenie pola wyboru nie może wpływać na dziadka nav. Czy ktoś ma jakieś sugestie? Czy jest jakiś rodzaj :active lub odpowiednik, który przemierza DOM?
Nie jestem pewien, czy wyrażam się szczególnie jasno, ale każda pomoc byłaby mile widziana. Podejrzewam, że jedynym rozwiązaniem może być jquery?
Odpowiedzi:
1 dla odpowiedzi № 1Łatwiej jest po prostu całkowicie uniknąć efektu krycia na urządzeniach mobilnych. To znaczy, ustaw krycie na 1, jeśli klient korzysta z urządzenia dotykowego.
1 dla odpowiedzi nr 2
Użyj zapytań o media, aby zrobić coś innego dla urządzeń przenośnych;
@media handheld {
/* .myHoverElement:active { }*/
}
Możesz spróbować poszukać również niektórych urządzeń dotykowych, na które chcesz celować. Na przykład;
iPhone <5:
@media handheld and (device-aspect-ratio: 2/3) {}
iPhone 5:
@media handheld and (device-aspect-ratio: 40/71) {}
iPad:
@media handheld and (device-aspect-ratio: 3/4) {}
Co do komentarza, że cimmanon stwierdził. StackOverflow ma całkiem sporo informacji na ten temat oraz sposobu kierowania na określone urządzenia i może lepiej je wykryć handheld nie działa na niektórych urządzeniach;
Czy przeglądarki iPhone / Android obsługują CSS @media?