懸停功能未恢復到其原始狀態

Question

我試圖通過圖像顯示一些類別，懸停時圖像變大，其他圖像變小，懸停的圖像會變暗並出現一個按鈕。這一切都有效。然而，其後不會回到原來的狀態。

http://codepen.io/lucymacgregor/pen/jyJOBj ^這就是我得到的代碼。

//Image Category size change effect 
$('.cat-wrap div').hover(function() { 
    $(this).css('width', '30%'); 
    $(this).children().css('opacity','1'); 
    $(this).siblings().css("width", "16.5%"); 
}); 

我覺得它是一個mouseout問題，但我認爲懸停功能已經照顧到了這一點。

Answer 1

使用jQuery，您還需要提供其他轉換：

//Image Category size change effect 
$('.cat-wrap div').hover(function() { 

    $(this).css('width', '30%'); 
    $(this).children().css('opacity', '1'); 
    $(this).siblings().css("width", "16.5%"); 

}, function() { 
    $(this).css('width', '19.2%'); 
    $(this).children().css('opacity', '0'); 
    $(this).siblings().css("width", "19.2%"); 
}); 

Answer 2

爲了恢復，您需要爲mouseout事件添加處理程序。這只是將第二個回調參數傳遞給hover()方法。

$('.cat-wrap div').hover(function() { 

     $(this).css('width', '30%'); 
    $(this).children().css('opacity','1'); 
     $(this).siblings().css("width", "16.5%"); 

    }, function(){ 
    // mouse out function 
}); 

Answer 3

這裏是你正在尋找的JavaScript的例子：

var origWidth; 
 
var origOpacity; 
 

 
//Image Category size change effect 
 
$('.cat-wrap div').hover(function() { 
 
\t 
 
    origWidth = $(this).css('width'); 
 
    origOpacity = $(this).children().css('opacity'); 
 
    
 
\t $(this).css('width', '30%'); 
 
    $(this).children().css('opacity','1'); 
 
\t $(this).siblings().css("width", "16.5%"); 
 
    
 
    }, 
 
    function(){ 
 
    \t $(this).css('width', origWidth); 
 
      $(this).children().css('opacity',origOpacity); 
 
});