圖像懸停轉換表 - CSS

Question

我有我的網頁上顯示的圖像列表，現在我需要爲所有圖像設置不同的轉換，即當我將鼠標懸停到圖像時，它應該顯示一個轉換，第二個時間懸停它應該顯示另一種過渡 所以，我的問題是如何使用CSS

Answer 1

我希望這將幫助您設置隨機trasnsition上懸停單個圖像...

$('.photo').hover(function() { 
    var a = Math.random() * 10 - 5; 
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)'); 
}, function() { 
    $(this).css('transform', 'none'); 
}); 

Answer 2

你不能隨意設置過渡，但你可以通過diff類名實現。

.transition1 { 
/* transition1 css properties goes here*/ 
} 
.transition2 { 
/* transition2 css properties goes here*/ 
} 

這可以與jquery鼠標懸停事件來達到的：

• 初始化的變量與0;
• 增量當鼠標懸停事件觸發器。
• 刪除舊的類名並添加新的類名。

var n = 0; 
$('.image') 
    .mouseenter(function() { 
    n = n + 1; 
    $(this).addClass('transition'+n); 
    }) 
    .mouseleave(function() { 
    $(this).removeClass('transition'+n); 
    }); 

以上jQuery代碼將在事件的mouseenter添加新的類名。您可以使用此代碼設置多個轉換屬性。