1

我想创建一个滑动效果。我有两个放在旁边的 div。悬停div id="left"时向右滑动并隐藏div id="right"。周围div id="left"有一个类似 mousetracker 的东西，它div id="left"为可以悬停隐藏的其他地方增加了一些空间div id="right"。我建立了一个例子来说明我的意思：

例子

下面是 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"。所以我仍然不知道如何解决这个问题。

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

4

2 回答 2

2

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

要仅使用 css 实现您想要的，您需要更改其 DOM 位置。使用您的示例，我必须更改以下内容才能使其正常工作：

  • div#right现在是div#tracker兄弟姐妹
  • #tracker, #left, #rightdiv 元素现在是绝对定位的
  • 因为div#right现在是兄弟姐妹而不是我的孩子，div#tracker所以我将以下 CSS 选择器更改 #tracker:hover #right { }为#tracker:hover + #right { }

演示（使用您的示例）

于 2013-04-12T11:21:40.700 回答
0

好的，所以只有当您将鼠标悬停在它上方时，我才能触发红色框的动画，方法是在它周围添加一个#left-outer具有相同宽度和高度的容器（）并添加overflow:hidden;

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

我希望我能提供帮助！

于 2013-04-12T10:05:47.240 回答