css - ホバー時にcss3の線形グラデーションの角度のみを変更できますか?

Question

したがって、要素に線形グラデーションがあり、すべてのルールを再度記述せずに要素にカーソルを合わせたときに、グラデーションの角度を上下逆さまに変更したい.これは可能ですか?

Answer 1

とミックスインを使用することで、より乾燥させることができますsass。

@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

なぜだめですか？hoverCSS で疑似クラスを指定して、状態のルールを作成するだけです。

#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-gradientMozilla 開発者ネットワーク
• 素敵で使いやすい CSS グラデーション ジェネレーター

注:便宜上、linear-gradientプロパティ値の基本的な形式のみをここに示します。ブラウザ間の互換性を提供するために、ベンダー固有のプレフィックス付きプロパティ値 (例: ) を追加し-o-linear-gradientます-moz-linear-gradient。

免責事項:ユーザー エージェントは CSS をより効率的にレンダリングするため、一般的には JS ベースよりも CSS ベースのソリューションを優先することをお勧めします。