1

我试图在 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/上的颜色渐变生成器来制作渐变。

任何帮助表示赞赏。谢谢！

4

1 回答 1

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');
});
于 2013-08-07T17:51:19.950 回答