0

我试图实现与此处描述的相反。

我在 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 中添加悬停效果？

4

1 回答 1

2

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

(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规则，您可以覆盖它。

于 2016-09-22T07:00:07.890 回答