Điều ngược lại: hover (khi rời chuột)?

Question

Có cách nào để làm điều ngược lại với :hoverchỉ sử dụng CSS không? Như trong: nếu :hover là on Mouse Enter, có CSS ​​tương đương với on Mouse Leave không?

Ví dụ:

Tôi có menu HTML sử dụng các mục danh sách. Khi tôi di chuột qua một trong các mục, có một hoạt ảnh màu CSS từ #999 đến black. Làm cách nào để tạo hiệu ứng ngược lại khi chuột rời khỏi khu vực mục, với hoạt ảnh từ black đến #999?

jsFiddle

(Có nhớ rằng tôi không muốn trả lời chỉ ví dụ này, nhưng toàn bộ "trái ngược với :hover" vấn đề.)

Answer 1

Nếu tôi hiểu đúng, bạn có thể làm điều tương tự bằng cách di chuyển hiệu ứng chuyển tiếp của bạn để liên kết chứ không phải là trạng thái hover:

ul li a { 
    color:#999;  
    transition: color 0.5s linear; /* vendorless fallback */ 
    -o-transition: color 0.5s linear; /* opera */ 
    -ms-transition: color 0.5s linear; /* IE 10 */ 
    -moz-transition: color 0.5s linear; /* Firefox */ 
    -webkit-transition: color 0.5s linear; /*safari and chrome */ 
} 

ul li a:hover { 
    color:black; 
    cursor: pointer; 
} 

http://jsfiddle.net/spacebeers/sELKu/3/

Định nghĩa về di chuột là:

Bộ chọn chuột di chuột được sử dụng để chọn các phần tử khi bạn di chuột qua chúng.

Theo định nghĩa đó, đối diện của di chuột là bất kỳ điểm nào mà chuột là không trên đó.Có người xa thông minh hơn tôi đã làm điều này, thiết lập hiệu ứng chuyển tiếp khác nhau trên cả hai trạng thái - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing { 
    padding: 10px; 
    border-radius: 5px; 

    /* HOVER OFF */ 
    -webkit-transition: padding 2s; 
} 

#thing:hover { 
    padding: 20px; 
    border-radius: 15px; 

    /* HOVER ON */ 
    -webkit-transition: border-radius 2s; 
} 

Answer 2

Không có không có tài sản rõ ràng cho nghỉ chuột trong CSS .

Bạn có thể sử dụng: di chuột qua tất cả các phần tử khác ngoại trừ mục được đề cập để đạt được hiệu ứng này. Nhưng Im không chắc chắn như thế nào thực tế đó sẽ được.

Tôi nghĩ bạn phải xem xét giải pháp JS/jQuery.

Answer 3

Chỉ cần sử dụng CSS transitions thay vì hoạt ảnh.

A { 
    color: #999; 
    transition: color 1s ease-in-out; 
} 

A:hover { 
    color: #000; 
} 

Live demo

Answer 4

Bạn đã hiểu lầm :hover; nó nói rằng chuột trên một mục, thay vì chuột vừa nhập mục.

Bạn có thể thêm hoạt ảnh vào bộ chọn mà không cần :hover để đạt được hiệu quả bạn muốn.

Transitions là một lựa chọn tốt hơn: http://jsfiddle.net/Cvx96/

Answer 5

Bạn có thể sử dụng CSS3 chuyển

Một số liên kết tốt:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 6

Đối diện của :hover dường như là :link.

(chỉnh sửa: không về mặt kỹ thuật đối kháng vì có 4 selectors :link, :visited, :hover và :active Năm nếu bạn bao gồm :focus..)

Ví dụ khi xác định một quy tắc .button:hover{ text-decoration:none } để loại bỏ các gạch dưới vào một nút, gạch dưới hiển thị khi bạn cuộn nút trong một số trình duyệt. Tôi đã khắc phục điều này với .button:hover, .button:link{ text-decoration:none }

Điều này tất nhiên chỉ hoạt động cho các yếu tố mà thực sự là các liên kết (có thuộc tính href)

Answer 7

Mặc dù câu trả lời ở đây là đủ, tôi thực sự nghĩ rằng W3Schools ví dụ về vấn đề này rất đơn giản (nó xóa bỏ sự nhầm lẫn (đối với tôi) ngay lập tức).

Sử dụng công cụ chọn :hover để thay đổi kiểu khi bạn di chuyển chuột lên đó.

Mẹo: Sử dụng các tài sản chuyển tiếp thời gian để xác định tốc độ của các "di chuột" có hiệu lực:

Ví dụ

.button { 
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */ 
    transition-duration: 0.4s; 
} 

.button:hover { 
    background-color: #4CAF50; /* Green */ 
    color: white; 
} 

Nói tóm lại, cho hiệu ứng chuyển tiếp mà bạn muốn " nhập "và" thoát "hoạt ảnh giống nhau, bạn cần phải sử dụng hiệu ứng chuyển tiếp trên bộ chọn chính .button thay vì chọn công cụ di chuột .button:hover. Đối với các hiệu ứng chuyển tiếp mà bạn muốn các hoạt ảnh "nhập" và "thoát" khác nhau, bạn sẽ cần chỉ định các bộ chọn chính và bộ chọn cuộn di chuột khác nhau.