我想在单击时将心形变为黑色,但更改 .heart 的颜色不会影响其 :之前 :之后的选择器。有什么办法吗?
.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;
}
在应用 :active/:hover 等状态时,您还需要定位伪元素。
这样:
.heart:active::before,
.heart:active::after {
background: black;
}
这是一个工作小提琴。
我还为您的伪元素添加了一个过渡,以便它们可以随着心脏的底部很好地褪色。
只需将伪元素的 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>
在您的情况下,如前所述,您需要专门针对伪元素之前和之后。 执行此操作的方法是添加以下 CSS:
.element:active::before,
.element:active::after{
background-color: #000;
}
这样,当您的元素处于活动状态时,您将定位之前和之后的伪元素。这里有一篇很棒的文章解释了之前和之后的属性。