.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>所以我希望最初只显示蓝色圆圈。然后，当用户将鼠标悬停在其中之一上时，它会向左滑出并显示其全部/在线/离线按钮。我希望一次只能执行一个。
我知道如何滑出和悬停，但我不知道如何隐藏按钮和文本，仅当鼠标不在按钮上时才显示按钮的蓝点部分。
我怎样才能最好地做到这一点？
最佳答案
这是实现它的一种方法。您不应该使用重复的 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>关于jquery - 在使用 flexbox 时，如何让位于 flex 列中的 3 个按钮在悬停时向左滑出进入 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49331013/