我在我的网站的按钮中使用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";
}
});
我如何实现这个
答案 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;