CSS :hover pseudo class 根本不起作用

Question

我正在尝试复制 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。

Answer 1

删除 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>

CSS :hover pseudo class 根本不起作用

CSS :hover pseudo class not working at all

html

css

hover

pseudo-class