如何解决CSS:悬停伪类根本不起作用
我正在尝试复制 codepen.io 主页,但我遇到了一个问题: :hover 似乎不起作用。 我已经尝试过不同的显示属性和不透明度等,但似乎没有任何效果。 我将包括我的整个 HTML 和 CSS 代码,以防万一可能会推翻另一个我不知道的事情。
代码:
:root {
font-family: 'Lato','Lucida Grande','Lucida Sans Unicode',Tahoma,Sans-Serif;
box-sizing: border-box;
}
*,*::before,*::after {
box-sizing: inherit;
}
body {}
.sidebar {
width: 16rem;
padding: 2rem;
height: 100vh;
text-align: center;
background: #1e1f26;
color: white;
position: relative;
z-index: -100;
}
.heading {
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: .2rem;
width: 100%;
margin-bottom: 1.2rem;
}
.fa-codepen {
margin: 0 0.1rem;
}
.try {
color: #aaaebc;
text-transform: uppercase;
margin-bottom: 0.4rem;
display: block;
width: calc(100%-4rem);
letter-spacing: 0.01rem;
font-size: 0.9rem;
}
.start-coding {
display: block;
font-size: 1.3rem;
color: white;
background-color: black;
padding: 0.4rem 1.8rem;
position: relative;
border-radius: 5px;
width: 100%;
}
.start-coding::before {
content: '';
background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
border-radius: 5px;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: -1;
}
.sidebar-list {
text-align: left;
margin: 2rem 0;
}
.list-link {
color: white;
}
.side-list-li:hover {
background: black;
}
<aside class="sidebar">
<h1 class="heading">C<i class="fab fa-codepen"></i>odepen</h1>
<h2 class="try">Try our online editor</h2>
<a href="#" class="start-coding">Start Coding</a>
<ul class="sidebar-list">
<li class="side-list-li"><a href="#" class="list-link">Trending</a></li>
<li class="side-list-li"><a href="#" class="list-link">Challenges</a></li>
<li class="side-list-li"><a href="#" class="list-link">Spark</a></li>
</ul>
<a href="#" class="code-pro">CodePen<span class="pro">Pro</span></a>
<img src="https://cdn4.buysellads.net/uu/1/78899/1606751891-Bugfender_-_Carbon_Ads.jpg" alt="">
<p class="lorem">Lorem,ipsum dolor sit amet consectetur adipisicing elit. Architecto,quam nulla nemo a sequi non quaerat deleniti,possimus in quos labore eius atque. Vitae maxime accusamus praesentium harum! Consectetur,hic.</p>
</aside>
<div class="content"></div>
现在我特别希望我的列表项(.side-list-li)的背景颜色在什么时候改变 悬停在它上面。 但是我也用其他元素尝试过它,并且 :hover 似乎在任何地方都不起作用。 顺便说一下,我正在使用 Chrome。
解决方法
删除 z-index -100 并将颜色更改为黑色以外的颜色。
<style>
:root{
font-family: 'Lato','Lucida Grande','Lucida Sans Unicode',Tahoma,Sans-Serif;
box-sizing: border-box;
}
*,*::before,*::after{
box-sizing: inherit;
}
body{
}
.sidebar{
width: 16rem;
padding: 2rem;
height: 100vh;
text-align: center;
background: #1e1f26;
color: white;
position: relative;
z-index: 1;
}
.heading{
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: .2rem;
width: 100%;
margin-bottom: 1.2rem;
}
.fa-codepen{
margin: 0 0.1rem;
}
.try{
color: #aaaebc;
text-transform: uppercase;
margin-bottom: 0.4rem;
display: block;
width: calc(100%-4rem);
letter-spacing: 0.01rem;
font-size: 0.9rem;
}
.start-coding{
display: block;
font-size: 1.3rem;
color: white;
background-color: black;
padding: 0.4rem 1.8rem;
position: relative;
border-radius: 5px;
width: 100%;
}
.start-coding::before{
content: '';
background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
border-radius: 5px;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: 2;
}
.sidebar-list{
text-align: left;
margin: 2rem 0;
}
.list-link{
color: white;
}
.side-list-li:hover{
background: red;
}
</style>
<body>
<aside class="sidebar">
<h1 class="heading">C<i class="fab fa-codepen"></i>odepen</h1>
<h2 class="try">Try our online editor</h2>
<a href="#" class="start-coding">Start Coding</a>
<ul class="sidebar-list">
<li class="side-list-li"><a href="#" class="list-link">Trending</a></li>
<li class="side-list-li"><a href="#" class="list-link">Challenges</a></li>
<li class="side-list-li"><a href="#" class="list-link">Spark</a></li>
</ul>
<a href="#" class="code-pro">CodePen<span class="pro">Pro</span></a>
<img src="https://cdn4.buysellads.net/uu/1/78899/1606751891-Bugfender_-_Carbon_Ads.jpg" alt="">
<p class="lorem">Lorem,ipsum dolor sit amet consectetur adipisicing elit. Architecto,quam nulla nemo a
sequi
non quaerat deleniti,possimus in quos labore eius atque. Vitae maxime accusamus praesentium harum!
Consectetur,hic.</p>
</aside>
<div class="content"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。