0

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

4

2 回答 2

2

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");
}
于 2012-05-22T09:21:48.940 回答
1

为什么不？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);
    }
);

参考：

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

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

于 2012-05-22T08:39:00.507 回答