CSS, tıklama stili stilini tıkladıktan sonra

Question

Düğüm stilini değiştirmenin bir yolu olup olmadığını merak ettim, css'de tıklandıktan sonra, element:active değil. Teşekkürler!

Answer 1

Saf bir css seçeneği arıyorsanız, şunu kullanın: focus pseudo class.

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 

Answer 2

Yalnızca CSS ile düğmenin etkin ve net sözde öğesini seçerek yapmak mümkündür.

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

codepen bakınız: Ayrıca arka plan rengini değiştirir basit bir jQuery tıklama işlevini yazabiliriz http://codepen.io/fennefoss/pen/Bpqdqx

.

HTML:

<button class="js-click">Click me!</button> 

CSS:

button { 
    background: none; 
} 

JavaScript:

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

Kontrol dışarı bu codepen: http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

aramalarınızdan kodu nedir ama ton?

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}

<a href="#">A button</a>

Yoksa aşağıda, tıklamada bir sınıf eklemek için jQuery kullanabilirsiniz: bir bir etiket varsa, o zaman bu yapabileceğini

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});

.button-clicked { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">Button</button>

Answer 4

Düğmeniz <a> öğesiyse,'ü kullanabilirsiniz.seçicisi. Bununla birlikte sınırlı

, yalnızca değiştirebilirsiniz:

• renk
• background-color
• sınır renkli (ve alt özelliklerini)
• anahat renkli
• dolgu ve strok özelliklerinin renk kısımları

this article about revisiting the :visited'u okuyun, ancak bazı daha akıllı insanlar bunu kesmek için daha fazla yol bulmuş olabilir. link, hover, active, focused ve visited:

Answer 5

Her bağlantı beş farklı durumu vardır.

Linkhover fare üzerinde, active tıklandığında devlet olduğunda, focused aktif izler ve yakın zamanda tıkladığınız bağlantıyı unfocus zaman visited sonun halidir normal, ortaya çıkmasıdır.

senin de focus veya visited üzerinde farklı bir stil elde etmek istiyorum tahmin ediyorum, o zaman aşağıdaki CSS ekleyebilirsiniz: herhangi bir sorun neden değil CSS'nizde

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

Önerilen bir düzen şudur :

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

Sen (elementi-> Stil-> Filtre inceleyin/Chrome-> Geliştirici araçları: hov): böyle elemanın durumlarını zorlamak için web tarayıcının geliştirici araçlarını kullanabilirsiniz Force state in Chrome Developer Tools