如何为特定的id更改css after选择器

Question

我试图改变代码，这样当我悬停在#btnSaveChanges上时，它会改变背景颜色为蓝色而不是黑色。类似#btnLogout

HTML

<button id="btnSaveChanges" className="button-57" onClick={handleSave}>
<span>Save</span>
<span>Save</span>
</button>
<button id='btnLogout' className="button-57" onClick={handleLogout}>
<span>Logout</span>
<span>Logout</span>
</button>

CSS:

.button-57 {
position            : relative;
overflow            : hidden;
border              : 1px solid #BBBBBB;
border-radius       : 20px;
color               : #18181a;
display             : inline-block;
font-size           : 15px;
line-height         : 15px;
padding             : 18px 18px 17px;
text-decoration     : none;
cursor              : pointer;
background          : #fff;
user-select         : none;
-webkit-user-select : none;
touch-action        : manipulation;
width               : 45%;
margin              :10px;
}
.button-57 span:first-child {
position   : relative;
transition : color 600ms cubic-bezier(0.48, 0, 0.12, 1);
z-index    : 10;
}
.button-57 span:last-child {
color       : white;
display     : block;
position    : absolute;
bottom      : 0;
transition  : all 500ms cubic-bezier(0.48, 0, 0.12, 1);
z-index     : 100;
opacity     : 0;
top         : 50%;
left        : 50%;
transform   : translateY(225%) translateX(-50%);
height      : 14px;
line-height : 13px;
}
.button-57:after{
content          : "";
position         : absolute;
bottom           : -50%;
left             : 0;
width            : 100%;
height           : 100%;
background-color : black;
transform-origin : bottom center;
transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform        : skewY(9.3deg) scaleY(0);
z-index          : 50;
}
.button-57:hover:after,
.button-57:active:after {
transform-origin : bottom center;
transform        : skewY(9.3deg) scaleY(2);
}
.button-57:hover span:last-child,
.button-57:active span:last-child {
transform  : translateX(-50%) translateY(-50%);
opacity    : 1;
transition : all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}

因此，我尝试添加这些类，但它没有工作，而是动画没有触发。

.button-57#btnSaveChanges::after{
content          : "";
position         : absolute;
bottom           : -50%;
left             : 0;
width            : 100%;
height           : 100%;
background-color : #2140D9;
transform-origin : bottom center;
transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform        : skewY(9.3deg) scaleY(0);
z-index          : 50;
}
.button-57#btnLogout:after{
content          : "";
position         : absolute;
bottom           : -50%;
left             : 0;
width            : 100%;
height           : 100%;
background-color : #db2020;
transform-origin : bottom center;
transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform        : skewY(9.3deg) scaleY(0);
z-index          : 50;
}

动画没有触发。

我做错了什么?有办法实现这个吗?

Answer 1

将!important规则添加到.button-57:hover:after上的transform规则

.button-57 {
position: relative;
overflow: hidden;
border: 1px solid #BBBBBB;
border-radius: 20px;
color: #18181a;
display: inline-block;
font-size: 15px;
line-height: 15px;
padding: 18px 18px 17px;
text-decoration: none;
cursor: pointer;
background: #fff;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 45%;
margin: 10px;
}
.button-57 span:first-child {
position: relative;
transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 10;
}
.button-57 span:last-child {
color: white;
display: block;
position: absolute;
bottom: 0;
transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 100;
opacity: 0;
top: 50%;
left: 50%;
transform: translateY(225%) translateX(-50%);
height: 14px;
line-height: 13px;
}
.button-57:after {
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
height: 100%;
background-color: black;
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(9.3deg) scaleY(0);
z-index: 50;
}
.button-57:hover span:last-child,
.button-57:active span:last-child {
transform: translateX(-50%) translateY(-50%);
opacity: 1;
transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
.button-57#btnSaveChanges::after {
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
height: 100%;
background-color: #2140D9;
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(9.3deg) scaleY(0);
z-index: 50;
}
.button-57#btnLogout:after {
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
height: 100%;
background-color: #db2020;
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(9.3deg) scaleY(0);
z-index: 50;
}
.button-57:hover:after,
.button-57:active:after {
transform-origin: bottom center;
transform: skewY(9.3deg) scaleY(2) !important;
}

<button id="btnSaveChanges" class="button-57" onClick={handleSave}><span>Save</span><span>Save</span></button>
<button id='btnLogout' class="button-57" onClick={handleLogout}><span>Logout</span><span>Logout</span></button>

Answer 2

作为cameron的的替代品方法时，可考虑降低特异性

.button-57#btnSaveChanges::after{}  

具有超高的特异性-特别是由于ID选择器.
相反，你可以为按钮添加第二个类名，例如

<button id="btnSaveChanges" class="button-57 btnSaveChanges"> 

.button-57 {
position: relative;
overflow: hidden;
border: 1px solid #BBBBBB;
border-radius: 20px;
color: #18181a;
display: inline-block;
font-size: 15px;
line-height: 15px;
padding: 18px 18px 17px;
text-decoration: none;
cursor: pointer;
background: #fff;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 45%;
margin: 10px;
}
.button-57 span:first-child {
position: relative;
transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 10;
}
.button-57 span:last-child {
color: white;
display: block;
position: absolute;
bottom: 0;
transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
z-index: 100;
opacity: 0;
top: 50%;
left: 50%;
transform: translateY(225%) translateX(-50%);
height: 14px;
line-height: 13px;
}
.button-57:after {
content: "";
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
height: 100%;
background-color: black;
transform-origin: bottom center;
transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
transform: skewY(9.3deg) scaleY(0);
z-index: 50;
}
.button-57:hover span:last-child,
.button-57:active span:last-child {
transform: translateX(-50%) translateY(-50%);
opacity: 1;
transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
.btnSaveChanges::after {
background-color: #2140D9;
}
.btnLogout:after {
background-color: #db2020;
}
.button-57:hover:after,
.button-57:active:after {
transform-origin: bottom center;
transform: skewY(9.3deg) scaleY(2);
}

<button id="btnSaveChanges" class="button-57 btnSaveChanges">
<span>Save</span>
<span>Save</span>
</button>
<button id='btnLogout' class="button-57 btnLogout">
<span>Logout</span>
<span>Logout</span>
</button>

进一步阅读

CSS专用性的细节
保持CSS专用性低的策略