如何指定CSS渐变生成器获得的颜色

时间:2015-07-02 12:18:08

标签: jquery css

我在我的网站的按钮中使用CSS渐变生成器颜色。当用户将鼠标悬停在按钮上时,颜色变为红色,然后在鼠标未超过按钮后,我想要由CSS渐变生成器生成颜色。

CSS渐变生成器提供的代码是

background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0, #423F42),
color-stop(1, #E3E3E3)
);
background-image: -o-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: linear-gradient(to right bottom, #423F42 0%, #E3E3E3 100%);

鼠标悬停在按钮上时用于更改颜色的Jquery代码

$(document).ready(function(){
function mOver(obj) {
obj.style.background = "CSS gradient color";
}

function mOut(obj) {
 obj.style.background = "#586161";
}
});

我如何实现这个

1 个答案:

答案 0 :(得分:1)

简单的解决方案是不要将Javascript用于应该用CSS处理的东西。



button {
    background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0, #423F42),
    color-stop(1, #E3E3E3)
    );
    background-image: -o-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -moz-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -webkit-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -ms-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: linear-gradient(to right bottom, #423F42 0%, #E3E3E3 100%);
}

button:hover {
    background: red;
}

<button>button</button>
&#13;
&#13;
&#13;