CSS: до: после фона цвет

Я хочу, чтобы фигура сердца была черной при щелчке, но изменение цвета .heart не повлияет на ее: до: после селектора. Есть ли способ сделать это?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

Вопросы, ищущих код помощи должны включать короткий код, необходимый для его воспроизвести ** в самом вопросе ** желательно в [** Stack SNIPPET **] (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, и она будет соответствовать background из родительского элемента .heart во все времена. Таким образом, вам не нужно запоминать дополнительные правила, если вы добавите больше изменений цвета в будущем. И у этого есть дополнительный бонус наследования перехода от красного к черному от родителя.

.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: до: после фона цвет

ответ

Смежные вопросы