Question

我想创建一个滑动效果。我有两个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"，效果也会开始。所以我仍然不知道如何解决这个问题。

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

Answer 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)

Answer 2

好的，所以只有当你将鼠标悬停在它上面时才能通过在它周围添加一个宽度和高度相同的容器（#left-outer）并添加overflow:hidden;来制作红色框的动画。

请参阅此示例：http://jsfiddle.net/N4X5P/

我希望我能帮忙！

如何用css隐藏滑动div

2 个答案: