Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating an element when hovering on two other element using css

i am trying to animate a div when hovering on another div. Ihave following code

html

<div>
</div>
<div class="content">
</div>

css

div {
    height: 100px;
    width: 100px;
    background: red; 
        transition: all 0.4s ease-in-out;
}
.content {
    height: 20px;
    width: 20px;
    background: green;
    display: none;

}
div:hover + .content{
    display: block;
    margin-top: -100px;
    margin-left: 50px;
}

What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english

jsfiddle-> http://jsfiddle.net/fTAUk/1/

like image 206
It worked yesterday. Avatar asked Jun 19 '13 19:06

It worked yesterday.


1 Answers

You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:

JS Fiddle

#box {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    transition: all 0.4s ease-in-out;
}
#content {
    width: 20px;
    background: green;
    height: 0;
    transition: all 0.4s ease-in-out;
    position: margin-top: -100px;
    margin-left: 50px;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#box:hover > #content {
    height: 20px;
}
like image 134
Derek Story Avatar answered Sep 28 '22 09:09

Derek Story