MouseOver và MouseOut Trong CSS

Question

Để sử dụng chuột vào một phần tử, chúng tôi sử dụng thuộc tính CSS :hover. Làm thế nào về cho con chuột ra khỏi yếu tố?

Tôi đã thêm hiệu ứng chuyển tiếp trên phần tử để thay đổi màu. Hiệu ứng hover hoạt động tốt, nhưng tôi nên sử dụng thuộc tính CSS nào để di chuột ra để áp dụng hiệu ứng? Tôi đang tìm một giải pháp CSS, không phải là một giải pháp JavaScript hoặc JQuery.

Answer 1

Đây là giải pháp tốt nhất, tôi nghĩ vậy.

CSS onomouseout:

div:not(:hover){ ... } 

CSS onmouseover:

div:hover{ ... } 

Đó là tốt hơn, bởi vì nếu bạn cần phải thiết lập một số phong cách CHỈ onmouseout và cố gắng để làm điều này theo cách này

div { ... } 

bạn sẽ thiết lập phong cách của bạn và cho onmouseover quá.

Answer 2

Bạn chỉ cần :hover, khi bạn di chuột ra khỏi phần tử, nó sẽ quay trở lại nó không mặc định: trạng thái di chuột, như thế này:

.class { color: black; } 
.class:hover { color: red; } 

khi bạn di chuột, màu sắc sẽ có màu đỏ và khi bạn "di chuyển", màu sẽ trở lại màu đen vì nó không còn khớp với bộ chọn :hover nữa. Đây là hành vi mặc định cho tất cả các trình duyệt, không có gì đặc biệt bạn cần làm ở đây.

Answer 3

Chính CSS không hỗ trợ bộ chọn mousein hoặc mouseout.

Bộ chọn :hover sẽ áp dụng cho phần tử trong khi chuột kết thúc, thêm kiểu khi chuột vào và xóa kiểu khi chuột rời.

Cách tiếp cận gần nhất là xác định kiểu bạn sẽ đặt trong mouseout trong kiểu mặc định (không di chuột) của bạn. Khi bạn di chuột qua phần tử, các kiểu trong phạm vi hover sẽ có hiệu lực, mô phỏng mousein và khi bạn di chuyển chuột ra khỏi phần tử, kiểu mặc định sẽ có hiệu lực trở lại, mô phỏng mouseout.

Dưới đây là một example, lấy từ here:

div { 
    background: #2e9ec7; 
    color: #fff; 
    margin: 0 auto; 
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in; 
    -moz-transition: -moz-border-radius 0.5s ease-in; 
    -o-transition: border-radius 0.5s ease-in; 
    -ms-transition: border-radius 0.5s ease-in; 
    transition: border-radius 0.5s ease-in; 
    text-align: center; 
    width: 200px; 
} 


div:hover { 
    background: #2fa832; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform: rotate(720deg); 
    -moz-transform: rotate(720deg); 
    -o-transform: rotate(720deg); 
    -ms-transform: rotate(720deg); 
    transform: rotate(720deg); 
} 

Các transition s được định nghĩa cho div:hover phong cách sẽ có hiệu lực khi chuột vào (và hover được áp dụng). transition s cho kiểu div sẽ có hiệu lực khi chuột rời (và hover bị xóa). Điều này dẫn đến các chuyển đổi mousein và mouseout khác nhau.

Answer 4

Tôi nghĩ rằng tôi đã tìm được giải pháp.

.class :hover { 
    /*add your animation of mouse enter*/ 
} 

.class { 
    /* 
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out 
    */ 
} 

Chỉ cần thử nó ... :)