图像悬停转换表 - 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添加新的类名。您可以使用此代码设置多个转换属性。