What am i doing wrong with my css that hover will not work?-CodePudding

Hello so I have used css hover, transform and transition before. but it's always been as simple as .cart:hover{do stuff}, for some reason I'm trying to change a h1 when it's hovered but cannot get it to work.

.header {
  text-align: center;
  margin-bottom: 40%;
}

.header h1 {
  font-size: 4rem;
  color: #DBEDF3;
  font-family: 'Permanent Marker', cursive;
  text-shadow: 8px 0 #DA0463;
}

.header:hover h1 {
  cursor: grab;
}

header component

<div className='header'>

        <div>
            <h1> words,</h1>
            <h2>more words.</h2>
        </div>
    

    </div>

No variation of .header:hover seems to work, I even put the specific h1 in its own div and tried to select it that way and still nothing, any help would be appreciated as I've already checked the other SO questions.

CodePudding user response：

.header h1:hover{
  color:red;
}

<div >
  <h1>Hover me</h1>
</div>

CodePudding user response：

Perhaps use

.header h1:hover

.header:hover, h1:hover

or try using an id