Question

我正在尝试与所描述的here完全相反。

我在wordpress页面中有一系列div，我想在页面上显示每个div随机倾斜到不同的程度。

当用户在它们上面盘旋时，它们也应该被拉直。

这就是我所拥有的：

    (function($) {
    $( document ).ready(function() {
        var a = Math.random() * 10 - 5;
        $('.format-aside').each(function( index ) { 
            $(this).css('transform', 'rotate(' + a + 'deg)');})
        });
})(jQuery);

起初，我跳过了.each部分，但这导致所有div都以相同的方式倾斜。然而，即使使用.each，它们仍然会以相同的方式倾斜。

关于悬停效果，我已将其设置在CSS页面中：

.format-aside:hover{-ms-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg);}

当所有这些都在CSS中完成时它起作用（但当然所有div都以相同的方式倾斜）。现在它不再起作用，所以我想我应该在jQuery中添加悬停效果？

Answer 1

他们都倾斜相同数量的原因是因为你在迭代元素之前计算度数。相反，您应该为每个元素计算一个角度：

(function($) {
$( document ).ready(function() {
    $('.format-aside').each(function( index ) { 
        // rotation degree between -5 and 5
        var a = Math.random() * 10 - 5;
        $(this).css('transform', 'rotate(' + a + 'deg)');})
    });
})(jQuery);

对于悬停效果，请尝试向其添加!important选项：

.format-aside:hover {
    -ms-transform: rotate(0deg) !important;
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
}

CSS无法工作的原因是因为jQuery将元素上的规则应用为内联样式。这些优先级高于任何CSS选择器。使用!important规则可以覆盖该规则。

尝试将多个div倾斜到不同的随机角度

1 个答案: