伪元素::after
用于在按钮后面创建类名.btn
的新内容。
由于某种原因,当悬停red
时应保持.btn--white
的颜色white
出现在整个按钮上。 z-index
的.btn::after
设置为-1
,它很好地隐藏了颜色,直到将按钮悬停为止。
应该在background-color
中的.btn--white::after
应该是white
,并且如果选择了颜色white
,它确实可以正常工作。选择不同的background-color
,例如red
时,问题开始。
仅使用CSS即可解决吗?
body { background-color: #777; } .button-box { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .btn, .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 1.5rem 4rem; display: inline-block; border-radius: 10rem; position: relative; font-size: 1.6rem; border: none; cursor: pointer; transition: all 0.2s; } .btn::after { content: ""; display: inline-block; height: 100%; width: 100%; border-radius: 10rem; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.4s; } .btn:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .btn:hover::after { transform: scaleX(1.4) scaleY(1.6); /* opacity: 0; */ } .btn:active { outline: none; transform: translateY(-1px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); } .btn--white { background-color: #fff; color: #777; } .btn--white::after { background-color: red; }
<div class="button-box"> <a href="#" class="btn btn--white">The Crazy Button</a> </div>
伪元素:: after用于在按钮后面创建类名为.btn的新内容。由于某些原因,当.btn--white应该保持白色时,红色会出现在整个按钮上...
您的问题对我来说还不清楚,您到底想达到什么效果。但是我猜测您希望按钮在悬停时保持white
,并希望red
显示在按钮后面。请参阅下面的示例。