我可以问一下我的CSS代码的原因是什么吗,当我将鼠标悬停在类上时,它显示背景颜色,但是当我尝试将其悬停在按钮上时,文本颜色不会显示它。
<li class="cards-carousel">
<div class="img">
<img
src="img/adams-homes.png"
draggable="false"
alt="Adams Home"
/>
</div>
<h2>Adams Home</h2>
<div class="links btn">
<a href="#">View Floor Plans</a>
</div>
</li>
.cards-carousel .links a {
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
font-weight: 500;
}
.cards-carousel .links a:visited {
color: #000;
}
.cards-carousel .links {
position: relative;
display: block;
background: #d4af50;
overflow: hidden;
transition: 1s all ease;
}
.cards-carousel .btn {
position: relative;
display: inline-block;
padding: 0.9rem 1.2rem;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 0.6s ease;
}
.cards-carousel .btn a:hover {
color: #fff !important;
}
.cards-carousel .btn:before {
background-color: #161443;
color: #fff;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.cards-carousel .btn:before {
width: 100%;
height: 0;
}
.cards-carousel .btn:hover::before {
height: 100%;
}
https://jsfiddle.net/2pb8j3uq/1/#&togetherjs=9snABpHcsk
我尝试尽我所能改变一切,我只是编码新手,仍在学习。非常感谢您的帮助和指导来解决我的问题
如果您使用
position
,元素的顺序很重要。目前,您的 .cards-carousel .btn:before
位于文本上方,因此不可见。您可以将 z-index
更改为:
.cards-carousel .btn a {
position: relative;
z-index: 2;
color: inherit;
}
因此,您的链接将出现在上面。
.cards-carousel .links a {
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
font-weight: 500;
}
.cards-carousel .links a:visited {
color: #000;
}
.cards-carousel .links {
position: relative;
display: block;
background: #d4af50;
overflow: hidden;
transition: 1s all ease;
}
.cards-carousel .btn {
position: relative;
display: inline-block;
padding: 0.9rem 1.2rem;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 0.6s ease;
}
.cards-carousel .btn a {
position: relative;
z-index: 2;
color: inherit;
}
.cards-carousel .btn a:hover {
color: #fff !important;
}
.cards-carousel .btn:before {
background-color: #161443;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 0;
transition: all 0.6s ease;
}
.cards-carousel .btn:hover:before {
height: 100%;
}
.cards-carousel .btn:hover a {
color: #fff !important;
}
<li class="cards-carousel">
<div class="img">
<img src="img/adams-homes.png" draggable="false" alt="Adams Home" />
</div>
<h2>Adams Home</h2>
<div class="links btn">
<a href="#">View Floor Plans</a>
</div>
</li>