CSS ben html düğmesi ile bir div eklenen ettik

dokunmatik ekranlı aygıtlarda göz ardı ediliyor değil hover. Benim problemim, dokunmatik ekranlı bir cihaza dokunulduğunda, başka bir elemana dokunana kadar düğmenin hover durumunu koruduğu.CSS ben html düğmesi ile bir div eklenen ettik

Dokunmatik ekranlı bir aygıta göz atarken vurgulu özelliğinin göz ardı edilebileceği bir yol var mı? aracılığıyla hover psuedos: Eğer kullanırsanız bağlantılar ihtiyaçlar iki kez vb

tıklayarak böylece

Geçenlerde bu kesin sorun üzerinde geldi

kaynak

2012-12-18 richhastings

"type =" button "' özniteliğiniz var mı? Değilse, düğme varsayılan olarak bir gönder düğmesine dönüşür. –

@PatrickJamesMcDougle hiç de doğru değil. Ne için bir gönderme düğmesi ?! – Neal

@Neal Evet, teknik özelliklere bakın. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html "Eksik değer varsayılanı, Gönderme Düğmesi durumu." –

Değil ideal bir çözüm (Btw. Bu CSS değil jQuery), ama teşekkürler Headstart için @dualed!

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

kaynak

2012-12-18 16:55:37 richhastings

Fareler portre takılı küçük dizüstü bilgisayarlar (örneğin MS yüzey) hakkında? Bu bir alt ideal yöntemdir. – dudewad

, iOS bir tıklama olarak vurgulu psödo dikkate görünüyor modernizr size uygulayabilirsiniz. html etiketine uygulanan no-touch sınıfı.

yüzden:

html a { color:#222; } 

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

kaynak

2012-12-18 15:48:49

Olayların tıklanabilir öğeler üzerinde nasıl tetiklendiği hakkında iOS belgeleri: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/ uid/TP40006511-SW7 –

Belki istediğin bu değil ama sen medyada bağlı olarak farklı css stil belirtebilirsiniz: Yukarıdaki örnekte

<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">

, main.css için kullanılacak bilgisayar ekranları ancak bir el aleti cihazı için, bu küçük resim olacaktır.

kaynak

2012-12-18 15:49:07 Slauster

, hemen hemen tüm dokunmatik cihazlar şu anda, kendilerini 'ekran' olarak bildiriyorlar, ancak elde değil. –

Ortam türünü CSS kurallarınızda belirtebilirsiniz. Ancak, el tipi cihazların mutlaka bir dokunmatik ekrana sahip olmadıklarını unutmayın.

kaynak

2012-12-18 16:19:05 dualed

Elde taşan çok iyi değil, ancak sorgudaki aygıt genişliğini belirterek bir çözüm buldum. – richhastings

@rhastings işe yarayabilir, ancak başka yan etkileri olabilir. Tam cihaz boyutları belirtmeniz gerekebilir. Ne yazık ki mozilla '-moz-touch-enabled''in webkit üzerinde eşdeğer uygulamaları yoktur. Ayrıca, mobil ürünlerin i aralığı hakkında konuştuğumuzu düşünüyorum, buraya bakın http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 – dualed

-2

Bir güzel ve kolay yolu Modernizr kullanıyor.

Modernizr çalışır

, her tarayıcı bunu desteklemiyorsa o dur ne ile özelliğini önek algılar özelliği için HTML etiketinin class özelliği bir girdi ekleyecektir.

Şimdi css stil sayfası serbestçe

.touch *:hover { 
    display: none; 
}

Ve aşağıdaki satırları ekleyin kullanın: İstediğiniz kadar birçok kez gelin. Siteniz dokunmatik ekranlarda görüntülendiğinde, tüm öğelerin hover etkisi etkisiz hale getirilecektir.

kaynak

2013-08-08 13:16:23

güzel bir fikir, ama çalışmıyor ... – MMachinegun

Ayrıca * css * inanılmaz * verimsizdir. Ancak, bu teknik, teknik açıdan çalışmalıdır. – dudewad

CSS ben html düğmesi ile bir div eklenen ettik

cevap

İlgili konular