JQuery를 통해 CSS의 유사 요소 색상을 변경하는 방법은 무엇입니까?

Question

CSS를 사용하여 하트 모양의 버튼을 만들었습니다. Here은 내 코드의 JSFiddle 링크입니다.

내가 양식 버튼을 클릭

#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>

는,이 하트 모양의 버튼 색상을 변경하고 싶습니다. 그러나이 하트 모양의 버튼은 CSS 유사 요소로 만들어지기 때문에 색상을 쉽게 변경할 수 없습니다.

JQuery를 사용하여 CSS 유사 요소 (예 : :before 및)를 조작 할 수있는 사람이 있습니까? 무엇에 테스트하지이 나를 위해 작동하는 것 같다

Answer 1

:before:after 배경색을 상속 한 다음 부모의 배경색을 변경하십시오. http://jsfiddle.net/npMyy/3/

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

Answer 2

(파이어 폭스 20) ..... 여기

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

, :active는 의사 클래스이며, :before 및 :after는 의사 요소입니다. 따라서 이것은 the standard에 따라 완벽하게 받아 들일 수 있습니다. 의사 요소 만 선택의 마지막 간단한 선택 후에 첨부 될 수 있지만

가상 클래스는 선택기 어딘가에 허용된다.

Answer 3

또 다른 sol'n은 심장 자녀의 :before 및 :after 수정 된 선택과 제출에 폼의 클래스를 변경하고 목표로하는 것입니다. 나는 정말로 을 사용하여 N A T H의 대답을 좋아하지만. sxy. 기존 코드를 최소한으로 변경했습니다.

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>