CSS: độ mờ chuyển đổi khi di chuột ra?

Question

.item:hover { 
     zoom: 1; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     -webkit-transition: opacity .15s ease-in-out; 
     -moz-transition: opacity .15s ease-in-out; 
     -ms-transition: opacity .15s ease-in-out; 
     -o-transition: opacity .15s ease-in-out; 
     transition: opacity .15s ease-in-out; 
    } 

Tại sao điều này chỉ tạo hiệu ứng cho độ mờ đục khi tôi di chuột nhưng không phải khi tôi rời khỏi đối tượng bằng chuột?

Demo đây: http://jsfiddle.net/7uR8z/

Answer 1

Bạn đang áp dụng hiệu ứng chuyển tiếp chỉ đối với pseudo-class :hover, chứ không phải yếu tố chính nó.

.item { 
    height:200px; 
    width:200px; 
    background:red; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.item:hover { 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

Demo: http://jsfiddle.net/7uR8z/6/

Nếu bạn không muốn chuyển đổi sang ảnh hưởng đến sự kiện mouse-over, nhưng chỉ mouse-out, bạn có thể biến chuyển ra cho :hover nhà nước:

.item:hover { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

Demo : http://jsfiddle.net/7uR8z/3/

Answer 2

bằng cách tôi đã đấu tranh với điều này trong FIREFOX cho il tôi nhận ra bạn có một lỗi đánh máy trong opacity từ:

-moz-transition: opactiy .15s ease-in-out; 

cần phải được

-moz-transition: opacity .15s ease-in-out; 

Answer 3

tôi quản lý để tìm một giải pháp sử dụng css/jQuery mà tôi cảm thấy thoải mái với. Vấn đề ban đầu: Tôi đã buộc phải hiển thị khả năng hiển thị trong khi hoạt hình vì tôi có các yếu tố treo bên ngoài khu vực. Làm như vậy, tạo khối văn bản lớn hiện đang treo bên ngoài khu vực nội dung trong khi hoạt ảnh.

Giải pháp là bắt đầu các phần tử văn bản chính với độ mờ là 0 và sử dụng addClass để tiêm và chuyển sang độ mờ 1. Sau đó, removeClass khi được nhấp lại.

Tôi chắc chắn có tất cả cách để thực hiện điều này. Tôi không phải là người làm điều đó. :)

Vì vậy, trong đó hầu hết các hình thức cơ bản ...

.slideDown().addClass("load"); 
.slideUp().removeClass("load"); 

Thanks for the help mọi người.

Answer 4

$(window).scroll(function() {  
    $('.logo_container, .slogan').css({ 
     "opacity" : ".1", 
     "transition" : "opacity .8s ease-in-out" 
    }); 
}); 

Kiểm tra fiddle: http://jsfiddle.net/2k3hfwo0/2/