SCSS &:hover not working in React App

1

Hi folks,

I really have no idea why this simple hover state isn’t working in my app, but neither the color nor cursor type change on hover.

The code I have is simply:

i {        
        padding: 0 15px 0 0; // this works  
        &:hover{
          color: yellow; // this don't
          cursor: pointer; // this don't
        }
      }

which is wrapped within the tool bar style like:

#toolbar {
      display: flex;
      align-items: center;
      position:fixed;
      grid-area: toolbar;
      width: 100vw;
      Padding: 5px 0 5px 20px;
      
      i {        
        padding: 0 15px 0 0; // this works  
        &:hover{
          color: yellow; // this don't
          cursor: pointer; // this don't
        }
      }
      
      div {        
        padding-right: 15px;
        color: grey;
      }
    }

What’s even more odd is that the padding defined immediately before &:hover is working, so what on earth could be causing this to not work.

I’ve pulled the code out into a separate pen and it works fine, but no matter what I try I can not get it to work in my app.

I really would appreciate anyone who can help me with this. I’ve spent a couple of days changing my code, but nothing seems to work.

Here’s a link to the broken pen

And here’s a link to the same code working outside of the app:
Working code

Thanks in advance for taking the time to look at this.

2

I actually don’t know what could possibly could go wrong with the code. The code looks 100% right to me, but it isn’t since the hover effect and all doesn’t work. :frowning:

If anyone else in this forum want to give it try, go ahead!

One thing I would suggest you try is css modules or something like styled-components those might actually solve your problem.

3

This seems to someone having a similar issue, but you could take tips from it: https://stackoverflow.com/questions/51749671/css-module-hover-child-not-working

4

@razzakammar_nano I really appreciate you taking the time to have a look at my code. Thank you so much.

I started to pull the code to bits and then remembered something I thought of when I woke this morning:- raise the z-index perhaps something is blocking the focus on the toolbar:

#toolbar {
      display: flex;
      align-items: center;
      position:fixed;
      grid-area: toolbar;
      width: 100vw;
      Padding: 5px 0 5px 20px;
      z-index: 1;
      i {        
        padding: 0 15px 0 0; // this works  
        &:hover{
          color: yellow; // this don't
          cursor: pointer; // this don't
        }
      }
      
      div {        
        padding-right: 15px;
        color: grey;
      }
    }

Hey Presto :- Raised z-index

Riddle me that! As I was pulling the code apart, I began to suspect that the preview area was interfering with the focus. Something was for sure, but that was a quick fix!

Cheers again,
LT

PS: Turned out it was the editor wrapper covering the toolbar

5

oooooo. Great job!

I usually rest from the project for a couple of hours then come back and usually find the mistake.