CODEWITHSUNDEEP
htmlcss
Wouter S
Wouter S

Reputation: 38

How to make a DIV move when you hover over it

So i'm working on a school project (beginner to coding here), and i need to make a div move when you hover over it.

Here is my css code for that div:

#div2
{
    box-shadow: 4px 4px 10px;
    width: 80%;
    height: 220px;
    font-size: 15px;
    margin-left: 5%;
    margin-bottom: 3%;
    text-align: center;
    margin: auto;
    background-color: #99CC00;
    a:hover
    {
        float: right;
    }
}

I need to make the whole box move to the right when you hover over it. If anyone could help me that would be awesome!

Upvotes: 0

Views: 48

Answers (3)

awtrimpe
awtrimpe

Reputation: 56

If you are looking to move the whole div, you can make a new div id with a hover on it. Not just links have the ability to hover.

Example:

#div2:hover {
   float: right;
}

Although, having a float on a hover will have it be very strange on the page. You can add padding-right to make it move just a little.

Upvotes: 1

Ali Naeimi
Ali Naeimi

Reputation: 622

remove 

   a:hover
    {
        float: right;
    }

and insert

  #div2:hover
        {
            float: right;
        }

Upvotes: 0

Snake14
Snake14

Reputation: 416

Your hover is currently just for a elements. If you want the div to do something, you'd have to add a new section with #div2: hover

Upvotes: 0

Related Questions