使用flexbox時，如何使flex列中的3個按鈕在懸停時向左滑入視圖？

Question

 .container { display: flex; flex-direction: column; border: 2px solid blue; } .mainCont { display: flex; background-color: #f2f2f2; min-height: 5em; justify-content: space-between; } .btn-group { display: flex; flex-direction: column; justify-content: center; width: 6em; } .allButton, .onButton, .offButton { display: flex; justify-content: space-between; align-items: center; } #circleAll { display: inline-flex; align-items: flex-start; background-color: blue; border-radius: 50%; width: .5em; height: .5em; }

 <!DOCTYPE html> <head> <title>testpage</title> </head> <body> <div class="container"> <!--main container--> <div class='mainCont'> <!--heading container--> <h3 id="twitchHead">TWITCH STREAMERS</h3> <div class="btn-group"> <button class='allButton'><span id="circleAll"></span><span id="onAll">All</span></button> <button class='onButton'><span id="circleAll"></span><span id="on1">Online</span></button> <button class='offButton'><span id="circleAll"></span><span id="off1">Offline</span></button> </div> </body>

所以我只希望藍色圓圈可以顯示。 然后，當用戶將鼠標懸停在其中一個上時，它會向左滑動並顯示其“全部/在線/離線”按鈕。 我希望一次只能執行一次。

我知道如何滑出並進行懸停，但是我不知道如何隱藏按鈕和文本，僅當鼠標不在其上方時才顯示按鈕的藍點部分。

我怎樣才能最好地做到這一點？

Answer 1

這是實現它的一種方法。 您不應該使用重復的ID，因此我將circleAll更改為一個類，並且還添加了.btn和.text類，以便於定位。 根據自己的喜好進行進一步的編輯，還可以為Flexbox添加前綴樣式，並為更廣泛的瀏覽器支持添加過渡效果。

 .container { display: flex; flex-direction: column; border: 2px solid blue; } .mainCont { display: flex; background-color: #f2f2f2; min-height: 5em; justify-content: space-between; } .btn-group { display: flex; align-items: flex-end; flex-direction: column; justify-content: center; } .allButton, .onButton, .offButton { display: flex; align-items: center; } .circleAll { display: inline-flex; align-items: flex-start; background-color: blue; border-radius: 50%; width: .5em; height: .5em; margin-right: 0px; transition: margin-right .3s ease 0s; } .btn:hover .circleAll, .btn:focus .circleAll { margin-right: 5px; } .text { max-width: 0px; overflow: hidden; display: block; transition: max-width .3s ease 0s; } .btn:hover .text, .btn:focus .text { max-width: 50px; }

 <div class="container"> <!--main container--> <div class='mainCont'> <!--heading container--> <h3 id="twitchHead">TWITCH STREAMERS</h3> <div class="btn-group"> <button class='allButton btn'> <span class="circleAll"></span> <span id="onAll" class="text">All</span> </button> <button class='onButton btn'> <span class="circleAll"></span> <span id="on1" class="text">Online</span> </button> <button class='offButton btn'> <span class="circleAll"></span> <span id="off1" class="text">Offline</span> </button> </div> </div> </div>

使用flexbox時，如何使flex列中的3個按鈕在懸停時向左滑入視圖？

問題描述

1 個解決方案

解決方案1
2 已采納 2018-03-17 00:26:05

使用flexbox時，如何使flex列中的3個按鈕在懸停時向左滑入視圖？

問題描述

1 個解決方案

解決方案1 2 已采納 2018-03-17 00:26:05

解決方案1
2 已采納 2018-03-17 00:26:05