Question

所以我在一个元素上有一个线性梯度, 我想改变梯度角度, 当我在元素上盘旋时颠倒下来, 而不再次写入所有规则。这有可能吗?

Answer 1

您可以使用 < a href=> "http://sass-lang.com/" rel="nofollow"\\\ code>sass 和 mixins, 实现 DRYer 。

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

<强度 > 参考文献:

注: for 方便起见,此处仅显示 linear-梯度 属性值的基本形式,以提供交叉浏览器兼容性,添加供应商专用的前置固定属性值(例如 -o-线性梯度 , -moz-线性 )。

demástronger: 用户代理将提高 CSS 的效率,一般而言,最好选择基于 CSS 的解决方案,而不是基于 JS 的解决方案。

友情链接