div按鈕滑入和滑出屏幕（取決於用戶的鼠標）

Question

我有一個類的div。 side-buttons。當用戶的鼠標懸停在div上時，該div將滑入和滑出。我想知道如何完全隱藏div並說出用戶的鼠標何時位於它將滑入的區域？

我試圖得到關閉屏幕，但將無法正常工作時，我就在div

鼠標這是我的網站，它只會工作 - http://smati.ca/test/index.html（不要點擊繼續，而是按一下週圍的彈出模態下車模式疊加在那裏，你可以看到在行動DIV）

這裏是我的CSS代碼：

.side-buttons { 
    position: absolute; 
    right: -100px; 
    top: 55%; 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

.side-buttons:hover { 
    right: 0px; 
} 

.side-buttons a { 
    display: block; 
    background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%); 
    border-radius: 0; 
    box-shadow: none; 
    border: none; 
    color: #f5f5f5; 
    font-size: 22px; 
    font-family: "Lato", sans-serif; 
} 

.side-buttons a small { 
    font-size: 16px; 
} 

.side-buttons a:hover, 
.side-buttons a:focus, 
.side-buttons a:active { 
    background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%); 
    color: #f5f5f5; 
} 

.side-buttons a:nth-child(2) { 
    background: linear-gradient(to left, #de3c88 15%, #f0a473 100%); 
} 

Answer 1

您可以使用一個僞元素，像這樣

html, body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 0; 
 
    right: 0; 
 
    height: 150px; 
 
    background: red; 
 
    transition: width 0.5s; 
 
} 
 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 30px; 
 
    right: 100%; 
 
    height: 100%; 
 
    transition: width 0s 0.5s; 
 
    border: 1px dotted gray; /* added for demo purpose */ 
 
} 
 
div:hover { 
 
    width: 100px; 
 
    transition: width 0.5s; 
 
} 
 
div:hover::after { 
 
    width: 0; 
 
    transition: width 0.5s; 
 
}

<div> 
 
</div>

這裏是另一種選擇，這可能是更容易添加到您現有的解決方案

html, body { 
 
    margin: 0; 
 
} 
 
.content { 
 
    width: 170px; 
 
    padding: 50px 30px; 
 
    background: lightgray; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 0; 
 
    padding-left: 30px; 
 
    overflow: hidden; 
 
    transition: width 0.5s, padding-left 0s 0.5s; 
 
    border: 1px dotted gray; /* added for demo purpose */ 
 
} 
 
.wrapper:hover { 
 
    width: 200px; 
 
    padding-left: 0; 
 
    transition: width 0.5s, padding-left 0.5s; 
 
}

<div class="wrapper"> 
 

 
    <div class="content"> 
 
    Some text and/or images<br> 
 
    or anything else needed 
 
    </div> 
 

 
</div>

Answer 2

你可以嘗試這樣的事情也即通過包裝它div並執行slide-in和slide-out對的影響如下，

#bx{ 
 
    width:210px; 
 
    height:120px; 
 
    position:absolute; 
 
    top:40%; 
 
    right:0; 
 
    overflow:hidden; 
 
    border:1px solid rgba(0,0,0,0.1); 
 
} 
 
#bx > .b{ 
 
    position:absolute; 
 
    width:200px; 
 
    height:120px; 
 
    background:blue; 
 
    right:-200px; 
 
    transition:0.6s ease; 
 
} 
 

 
#bx:hover > .b{ 
 
    right:0px; 
 
}

<div id="bx"> 
 
<div class="b"> 
 
</div> 
 
</div>