How to hide sliding div with css


Tags: html,css,styles,hover,effects

Problem :

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.



Solution :

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)


    CSS Howto..

    How to keep css content position when zooming in and out?

    How to display a div over other containts of an html page?

    How to hide sliding div with css

    How do I set up the Zurb Foundation icons?

    How to set CSS rule for a DIV in a LI of class UL?

    How can I use an inline style to add a shadow around the used portion of my page?

    CSS - Minus top value how to get rid of the gap below it

    CSS menu list items need to show inside div container

    How to add multiple css rules at once through Dev-Tools or Firebug

    Style
  • element with CSS background, to show only a part of images
  • How to reduce size of a text with police roboto on a small scren

    Angularjs hide and show according to screen size responsive

    How to let the user choose a page number?

    How Can I remove the injected CSS Resource in GWT?

    How to get css3 multi-column count in Javascript

    How can I make a div horizontally center itself in another div? [duplicate]

    How to create 2 separate SVG without blocking other div elements?

    How do I make entire div a link? [duplicate]

    How to fix float sidebar in Wordpress with Constructor theme?

    Jquery content slider, how to duplicate without redundant code

    How can I display an alert with the position of the element that was clicked?

    CSS: how to make margin: 0px auto work

    How to get a different link color on my tumblr static page then my main (front page?)

    How to give the a specific background color in CSS?

    How do you make this dogeared shape with css only

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to remove some css properties without the paticular one using regular expression?

    How to add text using css in textarea? [closed]

    JavaFX How to change color of dialog/window title?

    how to do a fade in/out while moving down css animation