Ngược lại với: hover (khi di chuột) là gì?

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

Thí dụ:

Tôi có một 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

(Hãy nhớ rằng tôi không muốn chỉ trả lời ví dụ này mà là toàn bộ :hovervấn đề "ngược lại với ".)

Nếu tôi hiểu chính xác, bạn có thể làm điều tương tự bằng cách chuyển các chuyển tiếp của bạn đến liên kết thay vì trạng thái di chuột:

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 của hover là:

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

Theo định nghĩa đó, ngược lại với di chuột là bất kỳ điểm nào mà chuột không ở trên đó. Ai đó thông minh hơn tôi đã thực hiện bài viết này, đặt các chuyển đổi khác nhau trên cả hai trạng thái - http://css-tricks.com/dierence-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;
}

Chỉ cần sử dụng chuyển tiếp CSS thay vì hoạt ảnh.

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

A:hover {
    color: #000;
}

Bản thử trực tiếp

Không, không có thuộc tính rõ ràng nào cho chuột để lại trong CSS.

Bạn có thể sử dụng: di chuột trên 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 tôi không chắc điều đó sẽ thực tế như thế nào.

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

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

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

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

http://www.alistapart.com/articles/und hieu-css3-transitions/

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

Sử dụng :hoverbộ chọn để thay đổi kiểu của nút khi bạn di chuyển chuột qua nút đó.

Mẹo: Sử dụng thuộc tính thời lượng chuyển tiếp để xác định tốc độ của hiệu ứng "di chuột":

Thí dụ

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

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

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

Đặt thời lượng của bạn trong lựa chọn không di chuột:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Chỉ cần thêm hiệu ứng chuyển tiếp vào phần tử mà bạn đang làm rối. Lưu ý rằng có thể có một số ảnh hưởng khi tải trang. Giống như nếu bạn thực hiện thay đổi bán kính đường viền, bạn sẽ thấy nó khi dom tải.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Bạn đã hiểu sai :hover; nó cho biết con chuột đang ở trên một mục, chứ không phải là con chuột vừa vào mục đó.

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

Chuyển tiếp là một lựa chọn tốt hơn: http://jsfiddle.net/Cvx96/

Điều ngược lại với :hoverdườ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, :hovervà :activeFive nếu bạn bao gồm. :focus.)

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

Tất nhiên điều này chỉ hoạt động đối với các phần tử thực sự là liên kết (có thuộc tính href)

Chỉ cần thêm một chuyển đổi và tên của hoạt ảnh trên biểu tượng lớp, trong trường hợp của bạn, ul li a, chỉ cần thêm thuộc tính "chuyển tiếp" và đó là tất cả những gì bạn cần

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>