CODEWITHSUNDEEP
htmlcsshoverpseudo-class
xutocode
xutocode

Reputation: 41

CSS :hover pseudo class not working at all

I'm trying to replicate the codepen.io homepage, but I have a problem: :hover doesn't seem to work. I've already tried different display properties and opacities etc. but nothing seems to work. I'm going to include my whole HTML and CSS code, just in case something maybe overrules another one and I am not aware of it.

Code:

: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>

Now specifically I want the background-color of my list-item (.side-list-li) to change when hovered over it. But I tried it with other elements too, and :hover just doesn't seem to work anywhere. I'm using Chrome by the way.

Upvotes: 0

Views: 131

Answers (1)

Clive Atkins
Clive Atkins

Reputation: 543

Remove the z-index -100 and change the colour to something other than black.

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

Upvotes: 1

Related Questions