Why does :hover in this CSS code not work?

Question

li.Log-In {
    margin-left: 20px;
    text-transform: uppercase;
}
li.Log-In:hover {
    margin-left: 20px;
    text-transform: uppercase;
    cursor: hand;
}

When I test it out, when I hover above Log In it doesn't change the cursor to hand

Voting to Close as this question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. — Paulie_D
– Paulie_D, Commented Sep 24, 2017 at 9:52

Ajmal Noushad · Accepted Answer · 2017-09-24 03:15:35Z

6

You dont need to add :hover for achieving this. And the name for hand cursor is not 'hand' its just 'pointer' Try this:

       li.Log-In {
        margin-left: 20px;
        text-transform: uppercase;
        cursor: pointer;
      }

answered Sep 24, 2017 at 3:15

Ajmal Noushad

9467 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wunth Over a year ago

Ha! I never thought of this which is crazy - the cursor is only relevant on hover so :hover isn't needed. I've written .myClass:hover { cursor: pointer; } for years!

Gad · Accepted Answer · 2017-09-24 03:52:09Z

-1

 Try this fun thing with hover!! :)

<!DOCTYPE html>
 <head>
     <title>Hover</title>
 </head>

<style type="text/css">

 #box{
width: 10em;
height: 10em;
background: #666;
margin: 2em auto;
box-shadow: 0 .2em .4em rgba(0,0,0,0.3);
-webkit-transition:all ease-in .2s;
-o-transition:all ease-in .2s;
-moz-transition:all ease-in .2s;
-ms-transition:all ease-in .2s;
transition:all ease-in .2s;
cursor: pointer;
/*cursor: wait;*/
}

#box:hover{
border-radius: .5em;
background: #13a58e;
box-shadow: 0 .5em .3em rgba(0,0,0,0.5);
margin: .3em auto;
}

</style>

 <body>

 <div id="box"></div>

</body>

</html>

edited Sep 24, 2017 at 3:52

answered Sep 24, 2017 at 3:46

Gad

357 bronze badges

Collectives™ on Stack Overflow

Why does :hover in this CSS code not work?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related