Change the background image of css:after class using jQuery

Question

I have a css:afer Property with background image.Is there any way to change the background image using jQuery. My css class is like this

.ui-btn-dis-right:after {
    width: 18px !important;
    height: 11px !important;
    background: url(../../../arrow.png) no-repeat center center !important;
    margin-top: -6px;
    content: "";
}

Could u please tell me how i can change the background image on click function using jQuery.

possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Marcos Pérez Gude, Aug 12 '15 at 06:17

score 1 · Accepted Answer · answered Aug 12 '15 at 06:20

You can for example use a second class to overwrite the background:

css:

.ui-btn-dis-right:after {
    width: 18px !important;
    height: 11px !important;
    background: url(../../../arrow.png) no-repeat center center !important;
    margin-top: -6px;
    content: "";
}

.ui-btn-dis-right.overwritten:after {
    background: ...
}

javascript:

$(".ui-btn-dis-right").addClass("overwritten");

Change the background image of css:after class using jQuery

1 Answers1