Làm cách nào để thay đổi màu của các phần tử giả trong CSS thông qua JQuery?

Question

Tôi đã tạo một nút hình trái tim bằng cách sử dụng CSS. Here là liên kết JSFiddle của mã của tôi.

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

Khi tôi bấm vào nút hình thức, tôi muốn nút hình trái tim này để thay đổi màu sắc của nó. Tuy nhiên, nút hình trái tim này được tạo từ các phần tử giả CSS và do đó, tôi không thể dễ dàng thay đổi màu của nó.

Có ai có manh mối về cách tôi có thể thao tác các phần tử giả CSS hay không (ví dụ: :before và :after) bằng cách sử dụng JQuery?

Answer 1

Tôi đặt :before:after màu nền kế thừa, sau đó thay đổi màu nền của bố mẹ. http://jsfiddle.net/npMyy/3/

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

Answer 2

Điều này dường như làm việc cho tôi (Firefox 20) ... không được kiểm tra trong bất cứ điều gì khác ..

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

Ở đây, :active là một pseudo-class, và :before và :after là pseudo-yếu tố. Vì vậy, điều này là hoàn toàn chấp nhận được theo the standard.

Lớp giả được cho phép ở bất kỳ đâu trong bộ chọn trong khi phần tử giả chỉ có thể được nối sau bộ chọn đơn giản cuối cùng của công cụ chọn.

Answer 3

sol'n khác sẽ được thay đổi lớp của mẫu của bạn trên nộp và nhắm mục tiêu của :before và :after con tim với bộ chọn sửa đổi. Mặc dù tôi THỰC SỰ như câu trả lời của N A T H bằng cách sử dụng :active. sxy. Chỉ cần thực hiện các thay đổi tối thiểu cho mã hiện tại của bạn.

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>