Skip to main content

Return to Question

merged code into a snippet
Source Link
tacoshy
tacoshy
  • 12.1k
  • 5
  • 18
  • 37

HTMLCode:

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

and my 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>
: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;
}
 

HTML:

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

and my 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;
}

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>
 

Source Link
xutocode
xutocode
  • 41
  • 9

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.

HTML:

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

and my 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;
}

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.