Tôi đã tạo một nút nhỏ để hiển thị thay vì hộp kiểm. Tôi đã tự hỏi nếu có một cách để cũng có một: hover nhìn bằng cách nào đó? nhờCSS: tạo kiểu hộp kiểm để trông giống như một nút, có di chuột không?
Trả lời
#ck-button:hover {
background:red;
}
Fiddle: http://jsfiddle.net/zAFND/4/
có vẻ như bạn cần một quy tắc rất giống với quy tắc kiểm tra của bạn
#ck-button input:hover + span {
background-color:#191;
color:#fff;
}
và di chuột và nhấp tiểu bang:
#ck-button input:checked:hover + span {
background-color:#c11;
color:#fff;
}
thứ tự là quan trọng.
+1 Tôi thích những gì bạn đã làm với trạng thái được nhấp –
@JasonGennaro cảm ơn :) –
Làm điều này cho một mát border
và font
hiệu lực:
#ck-button:hover { /*ADD :hover */
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid red; /*change border color*/
overflow:auto;
float:left;
color:red; /*add font color*/
}
hm ... gọn gàng nhưng người đăng không hỏi về nó đặc biệt. Ngoài ra, nhận xét css luôn là '/*...*/'. –
Cảm ơn @Joseph. Vâng. Tôi biết OP đã không yêu cầu nó ... Tôi đã trả lời câu trả lời của ': hover' Q và cho tôi thêm một chút giá trị. Đối với các ý kiến, có tôi nhận ra rằng ý kiến css là khác nhau. Nó chỉ cho ví dụ. Nhưng thay đổi cho chủ nghĩa hiện thực ;-) –
Tôi hiểu rồi. Và thực sự nghĩ về nó, sử dụng đường viền là một cách hay để không phải tạo một trạng thái di chuột được kiểm tra: P –
Hãy làm những gì Kelly nói ...
NHƯNG. Thay vì đặt input
được đặt ở vị trí tuyệt đối và trên cùng -20px
(chỉ cần ẩn nó khỏi trang), hãy đặt hộp nhập liệu bị ẩn.
dụ:
<input type="checkbox" hidden>
trình tốt hơn và có thể đặt nó ở bất cứ đâu trên trang.
# ck-button: hover {background: blue} ví dụ –