翻转时的 jQuery 和背景渐变

Question

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

http://jsfiddle.net/8C7JH/

这是我的 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 问题(没有任何 promise )。

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');
});