CODEWITHSUNDEEP
htmlcss
Digital Impact
Digital Impact

Reputation: 59

can't apply margin on hover to li

I can apply "color:red" on hover, but not margin

can't figure out what I'm doing wrong

my css

 .contact{
       color:black;
       position:relative;
    }

    .contact:hover{
        color:red;
        margin-top:20px;
  }

my html

<ul>
    <li>
      <a class="contact">move me on hover</a>
    </li>
</ul>

Upvotes: 0

Views: 75

Answers (4)

Sandeep K Goyal
Sandeep K Goyal

Reputation: 280

You can't set top margin to an inline element. You need to make your element block or inline-block if you want to set top margin in your element.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <style>
        .contact {
            color: black;
            position: relative;
            display:block;
        }

            .contact:hover {
                color: red;
                margin-top: 20px;
            }
    </style>
</head>
<body>
    <ul>
        <li>
            <div>abc</div>
            <a class="contact">move me on hover</a>
        </li>
    </ul>
</body>
</html>

Upvotes: 1

Justin
Justin

Reputation: 2958

It is an inline element. You should set the display for it to block or inline-block to make margin work.

.contact{
   display: block;
   color:black; 
    }
 .contact:hover{
   color:red;
   margin-top:20px;
  }

Upvotes: 1

Midzo Bagira
Midzo Bagira

Reputation: 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .contact{
       color:black;

    }

    li:hover{
        color:red;
        margin-top: 20px;
    }


    .contact:hover{
        color:red;
  }
    </style>
</head>
<body>
        <ul>
            <li>
            <a class="contact">move me on hover</a>
            </li>
        </ul>
</body>
</html>

Upvotes: 0

Jofbr
Jofbr

Reputation: 473

Use top instead of margin-top:

.contact:hover{
   color:red;
   top:-20px;
}

Upvotes: 0

Related Questions