表格上的图像悬停转换 - CSS

Question

我有我的网页上显示的图像列表，现在我需要为所有图像设置不同的过渡，也就是当我将鼠标悬停在图像上时，它应显示一个过渡，第二次悬停时应显示另一个过渡 所以我的问题是如何使用css

在悬停时为单个图像设置随机trasnsition

Answer 1

我希望这能帮到你......

$('.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 mouseover事件实现：

• 使用0;
初始化变量
• 鼠标悬停事件触发时的增量。
• 删除旧的类名并添加新的类名。

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

上面的jquery代码将在mouseenter事件中添加新的类名。您可以使用此代码设置多个转换属性。