我试图将:before
,:after
box-shadow
放在按钮后面。但是过渡是从 a 标签前面开始的。对于我的作品 CMS,我需要将所有属性都放在 a 标签上。
<a href="#" class="btn">Join Today</a>
.btn{
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
background-color: #8ec656;
border-radius: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
line-height: 1;
transition: box-shadow .4s;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
https://jsfiddle.net/3aj5muyu/
这是因为.btn
建立了一个堆叠上下文,因此它的背景将始终位于其内容的后面。从后到前的顺序是
- 构成堆叠上下文的元素的背景和边框。
具有负堆栈- 级别的子堆栈上下文(最负的优先级在前)。
- 流入、非内联级别、未定位的后代。
- 未定位的浮子。
- 流入、内联级别、未定位的后代,包括内联表和内联块。
堆栈级别为 0 的- 子堆叠上下文和堆栈级别为 0 的定位后代。
具有正堆栈- 级别(最不正的优先)的子堆栈上下文。
要修复它,.btn
不应该建立堆叠上下文。将以下属性移动到包装器:
position: relative;
z-index: 1;
.btn-wrapper {
position: relative;
z-index: 1;
display: inline-block;
}
.btn{
display: inline-block;
text-align: center;
background-color: #8ec656;
border-radius: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
line-height: 1;
transition: box-shadow .4s;
text-decoration: none;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
<div class="btn-wrapper">
<a href="#" class="btn">Join Today</a>
</div>
.btn:before,
.btn:after{
transition: .6s;
content: "";
box-shadow: 0 28px 17px -3px #777;
width: 84%;
height: 11px;
top: 48%;
left: 15px;
position: absolute;
opacity: 0;
}
.btn:hover:before,
.btn:hover:after{
opacity: 1;
}
这就是我必须解决的问题。感谢您的回复!
看看这个工作示例:
.btn {
position: relative;
/* z-index: 1; */
display: inline-block;
background-color: #8ec656;
border-radius: 30px;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
transition: box-shadow .4s;
text-decoration: none;
}
.btn > span {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
line-height: 1;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
display: inline-block;
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
<a href="#" class="btn"><span>Join Today</span></a>
https://jsfiddle.net/7argwcje/
这是因为之前和之后的元素实际上是 .btn 元素的子元素和纯文本的同级(今天加入)。因此,您无法强制文本位于前面。
这些是更改:
.btn {
position: relative;
/* z-index: 1; */
display: inline-block;
background-color: #8ec656;
border-radius: 30px;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
transition: box-shadow .4s;
text-decoration: none;
}
.btn > span {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
line-height: 1;
}
基本上将一些属性从 .btn
转移到包装器跨度元素。
请注意,不再需要 z 索引。