我製作了一個使用CSS的心形按鈕。 Here是我的代碼的JSFiddle鏈接。如何通過JQuery更改CSS中的僞元素的顏色？

#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和:after）？

來源

2013-04-29 user824624

它不能使用jQuery做 - 看http://stackoverflow.com/問題/ 3743513 /怎麼辦-I-AC cess-style-properties-of-pseudo-elements-with-jquery – andyb 2013-04-29 13:46:47

改爲添加類。無論如何，最好保留CSS中的所有樣式。 – powerbuoy 2013-04-29 14:07:54

我設置:before:after背景顏色繼承，然後更改其父項的背景顏色。 http://jsfiddle.net/npMyy/3/

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

來源

2013-04-29 14:06:19 Peiwen

謝謝，培文，這是我需要的 – user824624 2013-04-29 14:20:27

好sol'n @ Peiwen – Todd 2015-05-01 23:43:38

加1贊成這個夢幻般的答案！ – 2016-09-14 21:26:01

這似乎爲我工作（火狐20）......在別的沒有測試..

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

這裏，:active是一個僞類，以及:before和:after是僞元素。所以根據the standard這是完全可以接受的。

僞類在選擇器的任何位置都是允許的，而僞元素只能在選擇器的最後一個簡單選擇器之後附加。

來源

2013-04-29 13:50:43 naththedeveloper

css部分很明顯，asker的問題是改變顏色後，與jQuery ...這是不工作... :) – Frhay 2013-04-29 13:56:52

在這種情況下給該元素使用jQuery onlick另一個類 - 然後它不同的風格。 ..我會盡量做一個jsfiddle ... – naththedeveloper 2013-04-29 13:59:52

http://jsfiddle.net/npMyy/2/ – naththedeveloper 2013-04-29 14:03:28

另一個sol'n是改變提交您的窗體類和目標的心臟孩子的:before和:after與修改後的選擇。 雖然我真的很喜歡N A T H的回答，使用:active。 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>

來源

2015-05-01 23:42:27 Todd

如何通過JQuery更改CSS中的僞元素的顏色？

回答

DEMO

jQuery的

CSS

HTML

相關問題