Comment masquer div coulissant avec css

Question

Je voudrais créer un effet coulissant. J'ai deux divs qui sont placés à côté. En planant div id="left" qui glisse à droite et cache div id="right". Autour de div id="left" il y a quelque chose comme un mousqueteur qui ajoute un peu d'espace autour de div id="left" pour l'endroit supplémentaire qui peut être plané pour cacher div id="right". J'ai construit un exemple pour montrer ce que je veux dire:

Example

est Ci-dessous le code 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> 

et CSS pour l'effet de diapositive:

/*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; 
} 

Maintenant, le problème est que l'effet commence même lorsque vous passez la souris sur div id="right". Donc, je ne sais toujours pas comment résoudre ce problème.

J'apprécierais vraiment s'il y a quelqu'un qui pourrait m'aider.

Answer 1

L'effet commence même lorsque vous passez la souris sur div#right car il s'agit d'un enfant div#tracker et l'effet Hover se répercute sur le parent.

Pour obtenir ce que vous voulez en utilisant seulement css vous devez changer sa position DOM. En utilisant votre exemple que je devais changer ce qui suit pour le faire fonctionner:

• div#right est maintenant un div#tracker frères et soeurs
• #tracker, #left, #right éléments div sont maintenant absolue positionné
• depuis div#right est maintenant un frère et non un enfant de div#tracker J'ai changé le sélecteur CSS suivant #tracker:hover #right { }-#tracker:hover + #right { }

DEMO (using your example)

Answer 2

Ok, donc j'ai pu faire l'animation de la détente de la boîte rouge que si vous survolez en ajoutant un récipient autour (#left-outer) avec la même largeur et la hauteur et en ajoutant overflow:hidden;

voir cet exemple : http://jsfiddle.net/N4X5P/

J'espère que j'étais en mesure d'aider!