CSS nie unoszą się ignorowana na urządzeniach z ekranem dotykowym

Mam załączonych div z przycisku HTML:CSS nie unoszą się ignorowana na urządzeniach z ekranem dotykowym

$('.nav').append('<button class="restart">Restart</button>');

Przycisk ma właściwości CSS hover. Mój problem polega na tym, że po dotknięciu przycisku na urządzeniu z ekranem dotykowym przycisk zachowuje swój stan zawisu, dopóki inny element nie zostanie dotknięty.

Czy jest jakiś sposób na zignorowanie właściwości kursora podczas przeglądania za pomocą urządzenia z ekranem dotykowym?

Źródło

2012-12-18 richhastings

Czy masz atrybut 'type =" przycisk "'? Jeśli nie, przycisk staje się domyślnie przyciskiem przesyłania. –

@PatrickJamesMcDougle, co nie jest prawdą. Przycisk przesyłania do czego ?! – Neal

@Neal Tak, patrz na specyfikację. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html "Domyślna wartość brakująca to stan przycisku Wyślij." –

Nie jest to idealne rozwiązanie, ale dzięki @dualed dla HEADSTART!

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */ 
{ 
    button.restart:hover 
    { 
     /* replicate 'up' state of element */ 
    } 
}

Źródło

2012-12-18 16:55:37 richhastings

A co z mniejszymi laptopami (np. powierzchnią MS), gdzie mysz jest podłączona do portretu? To jest sub-idealna metoda. – dudewad

natknąłem dokładnym tego problemu niedawno, iOS wydaje się rozważenie psuedo aktywowanych jako dodatkowego kliknięcia, więc linki potrzeby klikając dwukrotnie itd

Jeśli używasz modernizr można zastosować: hover psuedos przez. klasa bezdotykowa zastosowana do znacznika html.

tak:

html a { color:#222; } 

html.no-touch a:hover { color:#111; }

Źródło

2012-12-18 15:48:49

Oto dokumentacja systemu iOS dotycząca wywoływania zdarzeń dotyczących klikalnych elementów: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/ UID/TP40006511-SW7 –

Może to nie jest to, co chcesz, ale można określić różne arkusze stylów CSS w zależności od mediów:

<link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css"> 
<link rel="stylesheet" media="print" href="print.css" type="text/css"> 
<link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

w powyższym przykładzie, main.css zostaną wykorzystane do ekrany komputerowe, ale w przypadku urządzenia ręcznego będzie to mały ekran.css

Źródło

2012-12-18 15:49:07 Slauster

są poprawne, chociaż prawie wszystkie urządzenia dotykowe obecnie zgłaszają się jako "ekranowe", a nie przenośne. –

Możesz określić rodzaj materiału w swoich regułach CSS.

@media handheld { 
    button.restart:hover { 
    /* undo hover styling */ 
    } 
}

jednak pamiętać, że ręcznych urządzeń nie muszą posiadać ekran dotykowy.

(Btw. To jest CSS nie jQuery)

Źródło

2012-12-18 16:19:05 dualed

Handheld nie działa zbyt dobrze, ale dzięki określeniu szerokości urządzenia w zapytaniu, mam rozwiązanie. – richhastings

@rhastings, które mogą działać, ale mogą mieć inne skutki uboczne. Być może będziesz musiał określić dokładne rozmiary urządzenia. Niestety mozilla '-moz-touch-enabled' nie ma równoważnych implementacji na webkicie. Zakładam też, że mówimy o gamie produktów mobilnych w wersji i, zobacz http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 – dualed

-2

Jeden miły i łatwy sposób używa się Modernizr.

Kiedy modernizr biegnie, doda wpis do klasy atrybutu znacznika HTML dla każdej funkcji wykryje, poprzedzając funkcji z no- jeśli przeglądarka nie obsługuje.

Teraz dodaj następujące linie do swojego arkusza stylów CSS

.touch *:hover { 
    display: none; 
}

i swobodnie korzystać z: hover tyle razy, ile chcesz. Gdy Twoja strona jest wyświetlana na ekranach dotykowych, efekt zawieszania wszystkich elementów zostanie wyłączony.

Źródło

2013-08-08 13:16:23

fajny pomysł, ale nie działa ... – MMachinegun

Również * w css jest * niewiarygodnie * nieefektywny. Jednak ta technika powinna działać, z technicznego punktu widzenia. – dudewad

CSS nie unoszą się ignorowana na urządzeniach z ekranem dotykowym

Odpowiedz

Powiązane problemy