CSS：之前：之後：背景顏色之後

我希望在點擊時將心形變成黑色，但是改變心臟的顏色不會影響其之前：在選擇器之後。有沒有辦法做到這一點？CSS：之前：之後：背景顏色之後

.heart { 
    background-color: red; 
    height: 60px; /*dimension of the square*/ 
    position: relative; 
    top: 40px; /*position from top*/ 
    transform: rotate(-45deg); /*negative = counter clockwise, put 0 to try*/ 
    width: 60px; /*dimension of the square*/ 
    transition: all 1s ease; /*length of animation*/ 
} 

.heart:before, 
.heart:after { 
    content:""; /*kosong, for it to exist*/ 
    background-color: red; 
    border-radius: 50%; /*perfect round curve*/ 
    height: 60px; /*dimension of the shape*/ 
    position: absolute; 
    width: 60px; /*dimension of the shape*/ 
} 

.heart:before { 
    top: -30px; /*position of the left shape*/ 
    left: 0; /*remember rotated ACW 45deg*/ 
} 

.heart:after { 
    left: 30px; /*position of the right shape*/ 
    top: 0px; /*remember rotated ACW 45deg*/ 
} 

.heart 
    { 
     opacity:0.3; /*original state*/ 
    } 
.heart:hover 
    { 
     opacity:1; /*hover state*/ 
    } 
.heart:active 
    { 
     opacity:1; /*hover state*/ 
     background:black; 
    }

來源

2017-01-23 Ah Quan

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https：//開頭博客.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

請上傳帶有html和css的小提琴，它對我們來說會更容易幫你。 – Omnitored

謝謝下次再來！ –

您還需要在應用：active /：hover等狀態時定位僞元素。

像這樣：

.heart:active::before, 
.heart:active::after { 
    background: black; 
}

這裏是一個工作Fiddle.

我還添加了過渡爲您的僞元素，使他們能夠與心臟的底部很好地褪色。

來源

2017-01-23 13:14:04 snkv

謝謝！ =）... –

不客氣。乾杯! – snkv

只需將僞元素的background屬性的值更改爲inherit，並且它始終與父.heart元素的background相匹配。這樣，如果將來添加更多顏色更改，則不必記得添加更多規則。它還有繼承紅色到黑色的轉換。

.heart{ 
 
    background:#f00; 
 
    height:60px; 
 
    left:30px; 
 
    opacity:.3; 
 
    position:relative; 
 
    top:40px; 
 
    transform:rotate(-45deg); 
 
    transition:background 1s ease,opacity 1s ease; 
 
    width:60px; 
 
} 
 
.heart:hover{ 
 
    opacity:1; 
 
} 
 
.heart:active{ 
 
    background:#000; 
 
    opacity:1; 
 
} 
 
.heart:before,.heart:after{ 
 
    content:""; 
 
    background:inherit; 
 
    border-radius:50%; 
 
    height:60px; 
 
    position:absolute; 
 
    width:60px; 
 
} 
 
.heart:before{ 
 
    left:0; 
 
    top:-30px; 
 
} 
 
.heart:after{ 
 
    left:30px; 
 
    top:0; 
 
}

<div class="heart"></div>

來源

2017-01-23 13:24:20 Shaggy

CSS：之前：之後：背景顏色之後

回答

相關問題