Kiểu nút thay đổi CSS sau khi nhấp vào

Question

Tôi đã tự hỏi nếu có cách nào để thay đổi kiểu của nút, trong css, sau khi được bấm, vì vậy không phải là element:active. Cảm ơn!

Answer 1

Nếu bạn đang tìm kiếm một tùy chọn thuần túy css, hãy thử sử dụng: lớp giả định tiêu điểm.

#style { 
    background-color: red; 
} 

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

Answer 2

Chỉ có thể thực hiện với CSS bằng cách chọn phần tử giả hoạt động và tiêu điểm của nút.

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

Xem codepen: http://codepen.io/fennefoss/pen/Bpqdqx

Bạn cũng có thể viết một hàm nhấp chuột jQuery đơn giản làm thay đổi màu nền.

HTML:

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

CSS:

button { 
    background: none; 
} 

JavaScript:

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

Check-out codepen này: http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

mã của bạn là gì nhưng tấn? Nếu nó là một thẻ, sau đó bạn có thể làm điều này:

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

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

Hoặc bạn có thể sử dụng jQuery để thêm một lớp trên nhấp chuột, như sau:

$("#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

Nếu nút của bạn sẽ là một yếu tố <a>, bạn có thể sử dụng :visited bộ chọn.

Bạn được giới hạn tuy nhiên, bạn chỉ có thể thay đổi:

• màu
• background-color
• border-color (và phụ thuộc tính của nó)
• phác thảo màu
• Các các bộ phận màu của thuộc tính tô màu và đột quỵ

Tôi chưa từng đọc this article about revisiting the :visited nhưng có thể một số người thông minh hơn đã tìm thấy nhiều cách để hack nó hơn.

Answer 5

Mỗi liên kết có năm quốc gia khác nhau: link, hover, active, focused và visited.

Link là sự xuất hiện bình thường, hover là khi bạn di chuột qua, active là trạng thái khi được nhấp vào, focused sau hoạt động và visited là trạng thái bạn kết thúc khi bạn Không tập trung vào liên kết gần đây nhấp vào.

Tôi đoán bạn muốn đạt được một phong cách khác nhau ở hai focus hoặc visited, sau đó bạn có thể thêm CSS sau đây:

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

Một đề nghị trật tự trong CSS của bạn để không gây ra bất kỳ rắc rối như sau :

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

bạn có thể sử dụng công cụ nhà phát triển trình duyệt web của bạn để buộc các bang của nguyên tố như thế này (CHROME-> Công cụ nhà phát triển/Kiểm tra phần-> còn phong cách> Filter: HOV): Force state in Chrome Developer Tools