jQuery and Background Gradient on rollover

Question

I am trying to apply a background gradient after a roll over in Jquery. I made a basic demo of it on jsfiddle but the problem is in safari, it doesn't reapply the gradient and I get a flat color on it after a user rolls off.

http://jsfiddle.net/8C7JH/

This is my jquery code:

$(".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 )"


               });
});

I used the color gradient generator at http://www.colorzilla.com/gradient-editor/ to make the gradient.

Any help is appreciated. Thanks!

Answer 1

I modified your jsfiddle, here: http://jsfiddle.net/PxCuw/

I can't test if it will work on safari, but I don't see how that was happening to begin with since it works in chrome. Basically, now it just toggles the hover class on and off. This is going to be easier to maintain/read/etc. It may even fix your issue with Safari (no promises there).

HTML

essentially just added the button class for shared properties between default and black

<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

added a class for button and black. button is for shared properties, and black is for when you hover

.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

when you mouse over, it removes the 'default' class and adds the black one, opposite on mouse out

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