如何隐藏与CSS的滑动div

我想创建一个滑动效果。我有两个放在旁边的div。当徘徊div id="left"右滑并隐藏div id="right"。围绕div id="left"有一个像鼠标追踪器的东西，在div id="left"附近增加了一些空间，可以隐藏div id="right"。我建立了一个例子来说明我的意思：如何隐藏与CSS的滑动div

Example

下面是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>

和CSS幻灯片效果：

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

现在的问题是，即使在盘旋div id="right"时，效果也会开始。所以我仍然不知道如何解决这个问题。

如果有人能帮助我，我真的很感激。

来源

2013-04-12 bonny

即使将鼠标悬停在div#right上，效果也会开始，因为它是div#tracker孩子，并且悬停效果正在冒泡到父级。

要实现你只想使用CSS，你需要改变它的DOM位置。使用你的榜样，我不得不改变以下，使其工作：

div#right现在是一个div#tracker兄弟
#tracker, #left, #right div元素现在绝对定位
因为div#right现在是兄弟，而不是一个孩子的div#tracker我改变以下CSS选择 #tracker:hover #right { }到#tracker:hover + #right { }

DEMO (using your example)

来源

2013-04-12 11:21:40 letiagoalves

你好，非常感谢。你是那个人！ – bonny

好了，我可以用相同的宽度和高度将围绕它（#left-outer）容器中，加入overflow:hidden;

看到这个例子使红框触发的动画只有当你在它悬停：http://jsfiddle.net/N4X5P/

我希望我能帮上忙！

来源

2013-04-12 10:05:47 Kevin

你好，并感谢您的支持，但这不是我的问题的主要目标。当盘旋灰色div时，效果也开始了。所以你所做的并不是我想要实现的。 – bonny

如何隐藏与CSS的滑动div

回答

相关问题