Giriş olduğunda: focus, tetikleme: hover stilleri

Question

:focus ve :hover ile biçimlendirdiğim bir girdi var. Giriş :focus olduğunda, girişin üzerine geldiğimde :hover stilinin tetiklenmesini istemiyorum.

Bunu nasıl şekillendirmem gerekiyor?

.form-control:hover { 
    border-color: #a9a9a9; 
} 

.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
} 

Answer 1

hızlı kesmek: .form-kontrol katı 0px #FFFFFF: Bir kenarlık eklemek odak üzerinde sınır Çıkarma

Answer 2

odak çalışır:

.form-control:hover { 
    border-color: #a9a9a9; 
} 
.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    border: none; 
} 

Benim css olarak izleyin

Veya "atlama" biçiminde olmaması için kenarlığı şeffaf olarak şeffaf olarak ayarlayın.

.form-control:hover { 
    border-color: #a9a9a9; 
} 
.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    border-color: rgba(0, 0, 0, 0); 
} 

Buraya bakın: http://jsfiddle.net/kbLP9/: http://codepen.io/TheNathanG/pen/eCtiu

Answer 3

bir çözüm girişi :focus olduğunda pointer-events: none beyanı kullanmaktır. http://jsfiddle.net/7LbNV/:

.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    pointer-events: none; 
} 

başka çözüm, arzu edilen etkiyi elde etmek için sözde sınıfları :focus ve :hover birleştirmektir.

.form-control:focus:hover { 
    border-color: initial; 
} 

Answer 4

bunun için bir belirli CSS seçici :not seçici var. Ve good compatibility vardır:

a:hover:not(:focus) { 
 
    color: magenta; 
 
} 
 

 
a:focus:not(:hover) { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

Ben de böyle bir şey ile, gelme durumuna göre biraz daha "statik" olacağından, focus olaya tercih vermek önermek:

a:hover:not(:focus) { 
 
    color: magenta; 
 
} 
 

 
a:focus { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

Ve geriye doğru uyumlu alternatif Gönderen: Basit bir deyişle

a:hover { 
 
    color: magenta; 
 
} 
 

 
a:focus { 
 
    color: cyan; 
 
} 
 

 
a:focus:hover { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

:

Sen hover ve camgöbeği için her durum (eflatun için bir kural vardır focus) ve her ikisi için de, focus durumuna (görsel olarak) tercih verme: cyan.

Answer 5

Basitçe şöyle bir :not(:focus) için :hover kuralı ekleyin: tarayıcı desteği bir konudur

.form-control:hover:not(:focus) { 
    border-color: #a9a9a9; 
} 

ise (:not() IE8'de ve alt desteklenmez gibi), muhtemelen sadece yeni bir kural yazmak zorunda kalacak kodlanmış bir renk değeriyle :hover kuralı geçersiz kılmak için :hover ve :focus birleştirme (border-color, currentColor başlangıç ​​değeri olarak, IE8'de desteklenen ve ya daha düşük değildir):

.form-control:hover { 
    border-color: #a9a9a9; 
} 

.form-control:hover:focus { 
    border-color: /* Default border color depending on your layout */; 
}