Bộ chọn chuột xuống trong CSS là gì?

113

Tôi nhận thấy rằng các nút và các phần tử khác có kiểu mặc định và hoạt động theo 3 bước: chế độ xem bình thường, chế độ xem di chuột / tiêu điểm và chế độ xem di chuột / nhấp chuột, trong CSS, tôi có thể thay đổi kiểu dáng của chế độ xem bình thường và chế độ xem di chuột như thế này:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

nhưng làm thế nào tôi có thể chọn mousedown? Tôi muốn một cái gì đó như thế này:

button:mousedown{
  //some styling
}

cảm ơn

html css css-selectors

— đa phương tiệnxp
nguồn

1

Có vẻ như một bản sao của stackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier

@ x4vier: Tôi không nghĩ vậy. Sau đó, một lần nữa, thật khó để phân biệt "chuột xuống" trong trường hợp này là gì.

— BoltClock

160

Tôi nghĩ bạn có nghĩa là trạng thái hoạt động

 button:active{
  //some styling
 }

Đây là tất cả các trạng thái giả có thể có mà một liên kết có thể có trong CSS:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

Xem thêm: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
nguồn

2

Tôi không muốn có các liên kết, tôi cần các nút, đặc biệt là vì trên thiết bị di động, di chuột tạo ra một trục trặc xấu xí. Cảm ơn

— đa phương

Thêm vào trường hợp đó, tôi sẽ tạo kiểu cho nút đầy đủ hơn. Bằng cách thêm đường viền: 0; bạn bị mất viền xung quanh nút và vấn đề bạn đang gặp phải.

— jansmolders86

@ jansmolders86 Bạn có biết có bộ chọn di chuột qua, di chuột qua, di chuyển xuống, di chuột lên cho hình ảnh hoặc nút trong css không?

— Ng2-Fun

@ J.Fun không thực sự, bạn có thể cố gắng đạt được hiệu quả mong muốn bằng cách sử dụng: trạng thái di chuột để vượt qua / rời đi và: hoạt động để giảm / lên. Nhưng bạn không thể phân biệt giữa hai loại này nếu không có javascript.

— jansmolders86

50

Tôi đã phát hiện ra rằng điều này hoạt động giống như một sự kiện tạm dừng:

button:active:hover {}

— shawn98ag
nguồn

33

Pro-tip Lưu ý: đối với một số lý do, cú pháp CSS cần:activeđoạn sau khi các:hovercho các phần tử giống nhau để có hiệu quả

http://www.w3schools.com/cssref/sel_active.asp

— woohooGuy
nguồn

2

CSS được đánh giá theo thứ tự nên điều này có ý nghĩa; một phần tử không thể trở thành :activetrước khi nó tồn tại :hover.

— InTheZone

2

Ngoài ra, :activephải sau :focusđể nó hoạt động. Cảm ơn vì đã chỉ ra điều này, tôi thực sự đang vò đầu bứt tai không hiểu tại sao CSS của tôi không có tác dụng!

— Michael

1

@InTheZone Tất nhiên nó có thể trở thành: hoạt động trước khi là: di chuột. Bạn có thể kích hoạt nó bằng bàn phím mà không di chuột.

— ANeves

2

Gần đây tôi đã phát hiện ra rằng điều đó :active:focuslàm tương tự trong css như :active:hoverthể bạn cần ghi đè thư viện css tùy chỉnh, chúng có thể sử dụng cả hai.

— Mees
nguồn