Question

所以我在一个元素上有一个线性渐变，当我悬停元素而不再重写所有规则时，我想将渐变角度改为颠倒。这可能吗？

Answer 1

您可以使用sass和mixins将其干掉。

@mixin gradient($angle) {
    background: linear-gradient($angle , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

#grad {
    @import gradient("bottom");
}

#grad:hover {
    @import gradient("right");
}

Answer 2

为什么不呢？只需在CSS中指定伪类，即可为hover状态创建规则：

#grad {
    background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}
#grad:hover {
    background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

如果您希望遵循DRY原则，请将这些规则创建为辅助类，而不是将它们附加到元素。这是使用jQuery的一个例子：

<强> CSS：

.grad {
    background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}
.grad-rotated {
    background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

<强> JS：

$('.grad').hover(
    function() {
        $(this).toggleClass('grad', false).toggleClass('grad-rotated', true);
    },
    function() {
        $(this).toggleClass('grad', true).toggleClass('grad-rotated', false);
    }
);

<强>参考文献：

注意：为方便起见，此处仅显示linear-gradient属性值的基本形式，以提供跨浏览器兼容性，添加特定于供应商的前缀属性值（例如-o-linear-gradient，-moz-linear-gradient）。

免责声明：，因为用户代理会更有效地呈现CSS，一般来说，最好选择基于CSS的解决方案而非基于JS。

我可以在悬停时仅更改css3中线性渐变的角度吗？

2 个答案: