Chỉ di chuột và Hoạt động khi không bị tắt

186

Tôi sử dụng di chuột , hoạt động và vô hiệu hóa để tạo kiểu Nút.

Nhưng vấn đề là khi nút bị tắt, kiểu di chuột và kiểu hoạt động vẫn được áp dụng.

Làm thế nào để áp dụng di chuột và chỉ hoạt động trên các nút được bật?

css

— Ali
nguồn

329

Bạn có thể sử dụng : lớp giả được kích hoạt , nhưng thông báo IE<9không hỗ trợ nó :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— Kỹ sư
nguồn

3

Cũng có :not()bộ chọn, nhưng một lần nữa, nó chỉ được hỗ trợ kể từ IE9. Xem: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enableddường như không hoạt động trong trường hợp của tôi. Sử dụng mô phỏng IE9 theo IE11.

— Neolisk ngày

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

Bạn có thể thử điều này ..

— Velayutham Anjamani
nguồn

Đây là một giải pháp tốt khi bạn muốn trạng thái "vô hiệu hóa di chuột" trông giống hệt trạng thái "không di chuột bị vô hiệu hóa".

— Mikhael Loo

Tôi <3 giải pháp này. cho phép tôi có các mục sau: <button class = "button"> hovers </ button> và <button class = "nút no-hover> không di chuột </ button> chỉ bằng cách sử dụng: not (.no-hover)

— Bến

35

Tại sao không sử dụng thuộc tính "bị vô hiệu hóa" trong css. Điều này phải hoạt động trên tất cả các trình duyệt.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— Madef
nguồn

13

Bao gồm tất cả các trạng thái bị vô hiệu hóa bằng cách chọn tất cả chúng trong một dòng:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Cách tiếp cận có độ đặc hiệu thấp hơn, hoạt động trong hầu hết các trình duyệt hiện đại (IE11 + và không bao gồm một số trình duyệt Opera & IE di động - http://caniuse.com/#feat=pulum-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

Các pointer-events: nonequy tắc sẽ vô hiệu hóa di chuột; bạn sẽ không cần nâng cao tính đặc hiệu với .btn[disabled]:hoverbộ chọn để vô hiệu hóa kiểu di chuột.

(FYI, đây là sự kiện con trỏ HTML đơn giản, không phải là sự kiện trừu tượng-đầu vào-thiết bị đầu vào-sự kiện)

— michai
nguồn

12

Trong sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
nguồn

10

Nếu bạn đang sử dụng LESShoặc Sass, Bạn có thể thử điều này:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— fatlinesofcode
nguồn

Đây là một giải pháp tốt trong SASS vì hiệu ứng di chuột sẽ được xử lý cho một nút bị vô hiệu hóa trừ khi bạn không bọc nó.

— mbokil

2

Một cách là thêm một lớp partcular trong khi vô hiệu hóa các nút và ghi đè trạng thái di chuột và trạng thái hoạt động cho lớp đó trong css. Hoặc loại bỏ một lớp khi vô hiệu hóa và chỉ định các thuộc tính giả và di chuột hoạt động trên lớp đó chỉ trong css. Dù bằng cách nào, có thể không thể thực hiện hoàn toàn bằng css, bạn sẽ cần sử dụng một chút js.

— techfoobar
nguồn