如何用css隐藏滑动div答案

【问题标题】：How to hide sliding div with css如何用css隐藏滑动div
【发布时间】：2013-04-12 09:36:09
【问题描述】：

我想创建一个滑动效果。我有两个放在旁边的 div。当悬停div id="left" 时向右滑动并隐藏div id="right"。在div id="left" 周围有一个类似鼠标跟踪器的东西，它在div id="left" 周围增加了一些空间，用于可以悬停以隐藏div id="right" 的额外位置。我建立了一个例子来说明我的意思：

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" 时效果也会开始。所以我仍然不知道如何解决这个问题。

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： html css styles hover effects

【解决方案1】：

即使在悬停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)

【讨论】：

【解决方案2】：

好的，所以只有当您将鼠标悬停在红色框上时，我才能触发它的动画

看这个例子：http://jsfiddle.net/N4X5P/

希望能帮到你！

【讨论】：

您好，感谢您的回答，但这不是我问题的主要目标。当悬停灰色 div 时，效果也会开始。所以你所做的不是我想要归档的。