CODEWITHSUNDEEP
htmlcss
German Katz
German Katz

Reputation: 53

Hover a div and moves another div

I have a parent div who have 2 childs, a div#2 and an image, the problem is that when i want the div#2 moves up, it carries the image with it

<section id="ticket">
        <div id="wrap_960">
            <div id="entry"></div>
            <img id="shadow" src="img/shadow.png">
        </div>
</section>

and this is the CSS:

#ticket{
height: 300px;
width: 100%;
position: relative;
}
#entry{
float: right;
height: 200px;
width: 100%;
background: white;
border: solid 1px #abcbdb;
border-radius: 15px;
position: relative;
}
#entry:hover{
margin-top: -30px;
}
#shadow{
margin-top: -160px;
}

Thanks!

Upvotes: 0

Views: 102

Answers (1)

Ne Ma
Ne Ma

Reputation: 1709

Thats because your moving it up and what ever is underneath naturally moves with it :)

#entry:hover{
    margin-top: -30px;
    margin-bottom: 30px; // should counteract the movement up.
}

Fiddle: http://jsfiddle.net/8KtaX/

Upvotes: 1

Related Questions