我可以只更改懸停時css3中線性漸變的角度嗎？

所以我對一個元素有一個線性漸變，並且當我將該元素懸停時沒有再次寫入所有規則時，我想將漸變角度改爲顛倒。這是可能的嗎？我可以只更改懸停時css3中線性漸變的角度嗎？

2012-05-22 Jozsef Kerekes

爲什麼不呢？只需在您的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%); 
}

，如果你想跟着乾的原則，建立這些規則爲輔助類，比連接和拆卸他們的元素。下面是使用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，一般來說，最好在基於JS喜歡基於CSS的解決方案。

來源

2012-05-22 08:39:00

+1在正確答案上。儘管如此，我不得不反對JS解決方案，因爲我發現使用JS在CSS中是不恰當的做法。 – jurgemaister

我同意，CSS會呈現更快，更優雅等更新我的帖子。謝謝。 –

我想強調這部分「沒有再次編寫所有規則」。由於供應商屬性，這可能需要很多文件長度。所以我想要這樣的東西：選擇器{背景：線性漸變：... } selector：hover {background：linear-gradient-angle：90％} –

你可以通過使用sass和mixin使它變幹。

@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-22 09:21:48 jurgemaister

正在更新我的答案，以添加CSS框架解決方案，因此取消了更新。好的，+1。 –

我贊成你的答案，但sass只是一個預處理器，但是如果我有很多具有多個盤旋的漸變，那麼加載的css仍然很大。我想這不能按我想要的方式完成。 –

我可以只更改懸停時css3中線性漸變的角度嗎？

回答

相關問題