Jak zmienić kolor pseudoelementów w CSS poprzez JQuery?

Question

Wykonałem przycisk w kształcie serca za pomocą CSS. Here jest łączem JSFiddle mojego kodu.

#heart { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: relative; 
 
} 
 
#heart .outline:before, 
 
#heart .outline:after { 
 
    position: absolute; 
 
    content: ""; 
 
    left: 28px; 
 
    top: 1px; 
 
    width: 15px; 
 
    height: 27px; 
 
    background: #d53423; 
 
    -moz-border-radius: 50px 50px 0 0; 
 
    border-radius: 85px 60px 0 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 0 100%; 
 
    -moz-transform-origin: 0 100%; 
 
    -ms-transform-origin: 0 100%; 
 
    -o-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
} 
 
#heart .outline:after { 
 
    left: 13px; 
 
    -webkit-transform: rotate(45deg); 
 
    border-radius: 45px 60px 0 0; 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transform-origin: 100% 100%; 
 
    -moz-transform-origin: 100% 100%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -o-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
} 
 
$("#heart").on('submit', 
 
function(e) { 
 
    console.log('click heart support'); 
 
    e.preventDefault(); 
 
    $('#heart .outline:before').css('background', 'grey'); 
 
} 
 
);

<form id="heart"> 
 
    <button id="like_btn" class="outline" type="submit"></button> 
 
</form>

Kiedy klikam przycisk formularz, chcę ten przycisk w kształcie serca, aby zmienić jego kolor. Jednak ten przycisk w kształcie serca składa się z pseudoelementów CSS i dlatego nie mogę łatwo zmienić jego koloru.

Czy ktoś ma pojęcia, w jaki sposób mogę manipulować pseudoelementami CSS (np. :before i :after) za pomocą JQuery?

Answer 1

Ustawiam :before kolor tła, a następnie zmianę koloru tła ich rodzica. http://jsfiddle.net/npMyy/3/

.outline { 
    background: red; 
} 
#heart .outline:before, #heart .outline:after { 
    background: inherit; 
} 

Answer 2

To wydaje się działać dla mnie (Firefox 20) ... nie testowano w cokolwiek innego ..

#heart .outline:active:before, 
#heart .outline:active:after { 
    background: #000; 
} 

Tutaj :active jest pseudo-klasa, a :before i :after są pseudo-elementy. Jest to całkowicie dopuszczalne zgodnie z the standard.

Pseudoklasy są dozwolone w dowolnym miejscu selektora, a pseudo-elementy mogą być dołączane dopiero po ostatnim selektorze prostym selektora.

Answer 3

Innym sol'n byłoby zmienić klasę formularza w sprawie przedstawienia i kierować serce dziecka :before i :after ze zmodyfikowanym selektora. Chociaż NAPRAWDĘ podoba mi się odpowiedź N A T H z użyciem :active. sxy. Wystarczy wprowadzić minimalne zmiany w istniejącym kodzie.

DEMO

jquery

$("#heart:not(.submitted)").on('submit',function(e){ 
    console.log('click heart support');  
    e.preventDefault(); 
    $('#heart').addClass('submitted'); 
}); 

css

// ... removed lines 

#heart.submitted .outline:before, 
#heart.submitted .outline:after{ 
    background: grey; 
} 

html

<form id="heart" > 
    <button id="like_btn" class="outline" type="submit" ></button> 
</form>