How to hide sliding div with css

Question

I would like to create a sliding effect. I have two divs that are placed beside. When hovering div id="left" that slides right and hides div id="right". Around div id="left" there is something like a mousetracker that adds some space around div id="left" for additional place that can be hovered to hide div id="right". I built an example to show what I mean:

Example

Below is the HTML:

<div id="main">
    <div id="tracker">
        <div id="left">slides right</div>    
        <div id="right">should disappear only when hover red div</div>  
    </div>
</div>

And CSS for the slide effect:

/*Sliding Effects:*/
#tracker:hover #left {
    margin-left: 150px;
    position: absolute;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
}
#tracker:hover #right {
   visibility:hidden;
}
#tracker:hover {
   width: 400px;
   height: 200px;
   margin-top: -25px;
   padding-top: 25px;
}

Now the problem is that the effect starts even when hovering div id="right". So I still don't know how to solve this issue.

I really would appreciate if there is someone who could help me out.

Answer 1

The effect starts even when hovering div#right because it is a div#tracker child and the hover effect is bublling up to the parent.

To achieve what you want only using css you need to change its DOM position. Using your example I had to change the following to make it work:

• div#right is now a div#tracker sibling
• #tracker, #left, #right div elements are now absolute positioned
• since div#right is now a sibling and not a child of div#tracker I changed the following css selector #tracker:hover #right { } to #tracker:hover + #right { }

DEMO (using your example)

Answer 2

Ok, so I was able to make the animation of the red box trigger only if you hover over it by adding a container around it (#left-outer) with the same width and height and adding overflow:hidden;

see this example: http://jsfiddle.net/N4X5P/

I hope I was able to help!