CSS: การเปลี่ยนความทึบของเมาส์ออก?

.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;
    }

เหตุใดสิ่งนี้จึงเคลื่อนไหวเฉพาะความทึบเมื่อฉันวางเมาส์ไว้ แต่ไม่ใช่เมื่อฉันปล่อยวัตถุด้วยเมาส์

สาธิตที่นี่: http://jsfiddle.net/7uR8z/

​

คุณกำลังใช้การเปลี่ยนกับ:hoverคลาสหลอกเท่านั้นไม่ใช่กับองค์ประกอบนั้นเอง

.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;
}

การสาธิต: http://jsfiddle.net/7uR8z/6/

หากคุณไม่ต้องการให้การเปลี่ยนแปลงมีผลกับmouse-overเหตุการณ์ แต่เพียงอย่างเดียวmouse-outคุณสามารถปิดการเปลี่ยนสำหรับ:hoverสถานะได้ดังนี้

.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;
}

การสาธิต: http://jsfiddle.net/7uR8z/3/

ฉันจัดการเพื่อหาวิธีแก้ปัญหาโดยใช้ css / jQuery ที่ฉันพอใจ ปัญหาเดิม: ฉันต้องบังคับให้แสดงการมองเห็นในขณะที่เคลื่อนไหวเนื่องจากฉันมีองค์ประกอบแขวนอยู่นอกพื้นที่ การทำเช่นนั้นทำให้ตอนนี้ข้อความขนาดใหญ่แขวนอยู่นอกพื้นที่เนื้อหาระหว่างการเคลื่อนไหวเช่นกัน

วิธีแก้ปัญหาคือเริ่มต้นองค์ประกอบข้อความหลักด้วยความทึบเป็น 0 และใช้addClassเพื่อฉีดและเปลี่ยนเป็นความทึบเป็น 1 จากนั้นremoveClassเมื่อคลิกอีกครั้ง

ฉันแน่ใจว่ามีวิธีทำ jQquery ทั้งหมด ฉันไม่ใช่ผู้ชายที่จะทำมัน :)

ดังนั้นในรูปแบบพื้นฐานที่สุด ...

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

ขอบคุณสำหรับทุกคนที่ช่วยเหลือ.

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

ตรวจสอบซอ: http://jsfiddle.net/2k3hfwo0/2/