简体   繁体   中英

jquery gradient css background change

currently in css I have something like this

.page-button, .generic-main
{/*medium color*/
    background: #0B9444; /* Old browsers */
    background: -moz-linear-gradient(top, #0dad50 0%, #0b9444 44%, #097a38 100%); /* FF3.6+*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0dad50), color-stop(44%,#0b9444), color-stop(100%,#097a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0dad50 0%,#0b9444 44%,#097a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0dad50 0%,#0b9444 44%,#097a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0dad50 0%,#0b9444 44%,#097a38 100%); /* IE10+ */
    background: linear-gradient(to bottom, #0dad50 0%,#0b9444 44%,#097a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dad50', endColorstr='#097a38',GradientType=0 ); /* IE6-9 */
}
.page-button:hover, .generic-light
{/*light color*/
    background: #97C193; /* Old browsers */
    background: -moz-linear-gradient(top,  #a8d6a3 0%, #97c193 44%, #8cb388 100%); /* FF3.6+*/
}
.generic-dark
{/*dark color*/
    background: #08662F; /* Old browsers */
    background: -moz-linear-gradient(top,  #0a803b 0%, #08662f 44%, #075728 100%);/*FF3.6+*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a803b), color-stop(44%,#08662f), color-stop(100%,#075728)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0a803b 0%,#08662f 44%,#075728 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0a803b 0%,#08662f 44%,#075728 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0a803b 0%,#08662f 44%,#075728 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0a803b 0%,#08662f 44%,#075728 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a803b', endColorstr='#075728',GradientType=0 ); /* IE6-9 */

}

then in jquery I have something like this

$('page-button').live({

    click: function () { submit();},

    mousedown: function (){
        $(this).addClass('generic-dark');
        $(this).css('border', '1px #FF0000 solid');
    },

    mouseout: function (){
        $(this).removeClass('generic-dark');
        $(this).css('border', '0px');
    }
});

all i want is for the div to have a gradient background at all times and go back to have a gradient background when done

if anyone has any ideas thanks in advance

$('page-button') refers to a tag. There is no such tag. You mean either:

$('.page-button') for a class name

or

$('#page-button') for an ID

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM