如何隱藏與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

回答

相關問題