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

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

为什么不？hover只需通过在 CSS 中指定伪类来为状态创建规则：

#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);
    }
);

参考：

• jQuery的hover()
• linear-gradient在 Mozilla 开发者网络上
• 一个不错的，易于使用的 CSS 渐变生成器

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

免责声明：由于用户代理将更有效地呈现 CSS，通常最好选择基于 CSS 的解决方案而不是基于 JS 的解决方案。