0

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.

Improve this question
1
  • Cant reproduce the issue with the code you provided. If I hover the links, the black background is applied to the links just fine. Did you already cleared the browsers cache?
    – tacoshy
    Commented Feb 17, 2021 at 23:08

1 Answer 1

Reset to default
1

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>
Improve this answer
2
  • The problem is that I need this z-index for my .start-coding:before , so that I get this linear-gradient background/ border..
    – xutocode
    Commented Feb 18, 2021 at 10:42
  • I didn't delete it I changed it to 1
    – Clive Atkins
    Commented Feb 18, 2021 at 10:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.