Question

我试图在Jquery中翻转后应用背景渐变。我在jsfiddle上做了一个基本的演示但问题是在safari中，它没有重新应用渐变，并且在用户滚动后我得到一个平面颜色。

这是我的jquery代码：

$(".default").mouseover(function() {
    $(this).css({ background: "#000" });         
});
$(".default").mouseout(function() {
$(this).css({ backgroundColor: "#1664b7",

background: "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOGRkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzE5NzNjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzE1NWViMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=)",

background: "-moz-linear-gradient(top,  #1d8dd4 0%, #1973c1 20%, #155eb2 90%)",

background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d8dd4), color-stop(20%,#1973c1), color-stop(90%,#155eb2))",

background: "-webkit-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "-o-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "-ms-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "linear-gradient(to bottom,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d8dd4',   endColorstr='#155eb2',GradientType=0 )"


               });
});

我使用http://www.colorzilla.com/gradient-editor/处的颜色渐变生成器来制作渐变。

感谢任何帮助。谢谢！

Answer 1

我在这里修改了你的jsfiddle：http://jsfiddle.net/PxCuw/

我无法测试它是否适用于safari，但我不知道它是如何开始的，因为它在chrome中工作。基本上，现在它只是打开和关闭悬停类。这将更容易维护/读取/等。它甚至可以解决你的Safari问题（没有承诺）。

HTML

基本上只是为默认和黑色

之间的共享属性添加了按钮类

<div class="default button" id="btnOne">TEST 1</div>
<div class="default button" id="btnTwo">TEST 2</div>
<div class="default button" id="btnThree">TEST 3</div>

CSS

为按钮和黑色添加了一个类。按钮用于共享属性，黑色用于悬停

.button {
    height: 30px;
    width: 80px;
    color:white;
}

.default {
    background-color: #1664b7;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOGRkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzE5NzNjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzE1NWViMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d8dd4), color-stop(20%, #1973c1), color-stop(90%, #155eb2));
    background: -webkit-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -o-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -ms-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: linear-gradient(to bottom, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d8dd4', endColorstr='#155eb2', GradientType=0);
}

.black {
    background-color:black;
}

JS

鼠标悬停时

，它会删除“默认”类并添加黑色，类似于鼠标

$(".default").mouseover(function () {
    $(this).removeClass('default');
    $(this).addClass('black');
});
$(".default").mouseout(function () {
    $(this).removeClass('black');
    $(this).addClass('default');
});

翻转时的jQuery和背景渐变

1 个答案:

HTML

CSS

JS