在懸停時隱藏的元素中滑動

我試圖在鼠標移動到屏幕右側時從屏幕右側創建滑動菜單。當元素沒有隱藏時，我們可以給出hover效果，或者我們使用click事件。但是，當鼠標指針移動到屏幕的右側時，我想從右側滑動div。在懸停時隱藏的元素中滑動

我還有另一個查詢。

我使用Twitter Bootstrap 3。

假設我有一個div與test1類和內部的div，我有另一div與test2類。如果我將test2 div的height設爲100px;我想自動test1的高度將是100px。但在我的情況下，這並沒有發生。 div test1的高度仍爲0px。

<div class="test1"> 
    <div class="test2"> 
     ..content.. 
    </div> 
</div>

在此先感謝。

來源

2013-11-28 Unknown User

是'test2'浮動元素？如果是這樣，解決方法是使'test1'' overflow：hidden' – techfoobar

發佈test1和test2的CSS。 – techfoobar

這裏有一個唯一的CSS的解決方案：

<div class="page-wrapper"> 
    <div class="sidebar-wrapper"> 
     <div class="sidebar"> 
      <h1>Sidebar</h1> 
     </div> 
    </div> 
    <div class="main-content"> 
     <h1>Main content</h1> 
    </div> 
</div>

CSS：

.page-wrapper { 
    position: relative; 
} 
.sidebar-wrapper { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    display: inline-block; 
    position: fixed; 
    right: -180px; 
    padding-left: 20px; 
    width: 200px; 
    -webkit-transition: all 0.5s; /* for a bit of sexiness */ 
    -moz-transition: all 0.5s; 
} 
.sidebar-wrapper:hover { 
    right: 0; 
} 
.sidebar { 
    background: #acacac; 
    color: #fff; 
    min-height: 600px; 
}

這裏有一個小提琴http://jsfiddle.net/8rT9r/

來源

2013-11-28 05:50:57 monners

謝謝你的monners。這真的給了我一個想法。 –

不客氣。 – monners

方式一：當鼠標指針位於屏幕右側時，跟蹤鼠標位置並寫入JS以顯示菜單。

方式2：在屏幕右側有100％的高度和5px（可以隨意改變）寬div，並顯示該div懸停的菜單。

查詢2：如果您的外部div浮動，請使用clearfix來解決高度問題。

來源

2013-11-28 05:29:06 ravisuhag

我會試試這兩種方法。 –

在懸停時隱藏的元素中滑動

回答

相關問題