英文:
span's CSS doesn't work properly when I use "background-color" on container's CSS
问题
span标签的CSS在我使用"background-color"在容器的CSS上时无法正常工作。这段代码有效，但是当我取消注释时，结果失败了。有解决方案吗？
<div class="areaButtons">
<div class="buttonX">
<a href="#"><span></span>Button X</a>
</div>
</div>
.buttonX{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
/* background-color: #807b7b; */
}
你可以在以下链接查看所有的代码：https://codepen.io/aphroditef/pen/RwqQoYa
英文:
span's CSS doesn't work properly when I use "background-color" on container's CSS. This code works, but when I uncomment the result fails. Any solution?
<div class="areaButtons">
<div class="buttonX">
<a href="#"><span></span>Button X</a>
</div>
</div>
.buttonX{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
/* background-color: #807b7b; */
}
You can see all the code on the link https://codepen.io/aphroditef/pen/RwqQoYa
答案1
得分: 0
问题出在z-index上。
在.buttonX a:before, .buttonX a:after {上的z-index: -1;将展开区域放在了background-color的后面。
在下面的片段中，我做了一些调整，具体如下：
- 将按钮文本放在自己的
span中。 - 在
a标签内的span上添加了类，以便更容易区分它们。
.buttonX {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #807b7b;
}
.buttonX a {
width: 220px;
height: 80px;
text-decoration: none;
text-align: center;
line-height: 80px;
transition: all 0.5s;
position: relative;
}
.buttonX a span.text {
text-transform: uppercase;
color: #f2dc82;
/*background-color: transparent;*/
font-family: 'roboto';
font-size: 26px;
z-index: 1;
position: relative;
}
.buttonX a:before,
.buttonX a:after {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background-color: #f2dc82;
border-radius: 50%;
transform: translateY(-50%);
transition: all 0.3s;
opacity: 0;
}
.buttonX a:before {
left: 0;
box-shadow: -100px 0 0 #94864f;
}
.buttonX a:after {
right: 0;
box-shadow: 100px 0 0 #94864f;
}
.buttonX a:hover:before {
left: 50%;
box-shadow: 30px 0 0 #f2dc82;
transform: translateX(-50%) translateY(-50%);
opacity: 1;
}
.buttonX a:hover:after {
right: 50%;
box-shadow: -30px 0 0 #f2dc82;
transform: translateX(50%) translateY(-50%);
opacity: 1;
}
.buttonX span.other {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f2dc82;
border-radius: 8px;
transform: scale(0);
transition: all 0.3s;
}
.buttonX a:hover span.other {
transform: scale(1);
transition-delay: 0.4s;
}
.buttonX a:hover span.text {
color: #1a84f5;
transition-delay: 0.4s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="areaButtons">
<div class="buttonX">
<a href="#">
<span class="other"></span>
<span class="text">Button X<span>
</a>
</div>
</div>
</body>
</html>
英文:
The issue is because of z-index.
Your z-index:-1; on .buttonX a:before, .buttonX a:after { put the expanding region behind the background-color
In the below snippet I've moved a few things around. Namely:
- Putting the button text in it's own
span - Added classes to the
spans inside theatag so we can more easily differentiate between them
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.buttonX {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #807b7b;
}
.buttonX a {
width: 220px;
height: 80px;
text-decoration: none;
text-align: center;
line-height: 80px;
transition: all 0.5s;
position: relative;
}
.buttonX a span.text {
text-transform: uppercase;
color: #f2dc82;
/*background-color: transparent;*/
font-family: 'roboto';
font-size: 26px;
z-index: 1;
position: relative;
}
.buttonX a:before,
.buttonX a:after {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background-color: #f2dc82;
border-radius: 50%;
transform: translateY(-50%);
transition: all 0.3s;
opacity: 0;
}
.buttonX a:before {
left: 0;
box-shadow: -100px 0 0 #94864f;
}
.buttonX a:after {
right: 0;
box-shadow: 100px 0 0 #94864f;
}
.buttonX a:hover:before {
left: 50%;
box-shadow: 30px 0 0 #f2dc82;
transform: translateX(-50%) translateY(-50%);
opacity: 1;
}
.buttonX a:hover:after {
right: 50%;
box-shadow: -30px 0 0 #f2dc82;
transform: translateX(50%) translateY(-50%);
opacity: 1;
}
.buttonX span.other {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f2dc82;
border-radius: 8px;
transform: scale(0);
transition: all 0.3s;
}
.buttonX a:hover span.other {
transform: scale(1);
transition-delay: 0.4s;
}
.buttonX a:hover span.text {
color: #1a84f5;
transition-delay: 0.4s;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="areaButtons">
<div class="buttonX">
<a href="#">
<span class="other"></span>
<span class="text">Button X<span>
</a>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论