[英]flex-box hover child full height
I'm trying to do a grid caret, the caret will be on top and bottom, and when user hover on each side there will be a grey area. 我正在尝试做一个网格插入符号,插入符号将在顶部和底部,并且当用户将鼠标悬停在每侧时,将出现一个灰色区域。
<div class="control-wrap">
<div class="caret-wrap">
<span class="caret">▲</span>
</div>
<div class="caret-wrap">
<span class="caret">▼</span>
</div>
</div>
My progress is good but there's an issue with the hover, it doesn't fill the rest of the space around. 我的进度很好,但是悬停有问题,它没有填补周围的其余空间。
Demo https://jsfiddle.net/xqq0wpes/1/ 演示https://jsfiddle.net/xqq0wpes/1/
With a little modification - on the .control-wrap
just manage the flow of the child elements ( .caret-wrap
), and on the child elements( .caret-wrap
) control the caret's position. 而在稍加修改-对
.control-wrap
只是管理的子元素(流动.caret-wrap
),并在子元素( .caret-wrap
)控制插入符的位置。
.control-wrap { display: flex; flex-direction: column; width: 20px; height: 30px; margin: 0px 10px; border: 1px solid; } .caret-wrap { display: flex; justify-content: center; align-items: center; flex-grow: 1; cursor: pointer; font-size: 8px; } .caret-wrap:hover { background: #ddd; } .caret-wrap:active { color: grey; }
<div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div> <div class="caret-wrap"> <span class="caret">▼</span> </div> </div>
you need to remove align-items: center;
您需要删除
align-items: center;
and justify-content: space-evenly;
和
justify-content: space-evenly;
from the .control-wrap
and add flex: 1 1 auto;
从
.control-wrap
并添加flex: 1 1 auto;
, align-items: center;
,
align-items: center;
, justify-content: center;
,
justify-content: center;
to the .caret-wrap
so that child item get the full width and available height and caret will get aligned in the center. 插入
.caret-wrap
以便子项获得完整宽度和可用高度,并且插入符将在中心对齐。 Here is your updated fiddle https://jsfiddle.net/xqq0wpes/10/ 这是您更新的小提琴https://jsfiddle.net/xqq0wpes/10/
Here is your updated CSS 这是您更新的CSS
.control-wrap {
width: 20px;
/* align-items: center; */
display: flex;
flex-flow: column;
margin: 0px 10px;
border: 1px solid;
height: 30px;
/* justify-content: space-evenly; */
.caret-wrap {
cursor: pointer;
font-size: 8px;
padding-left: 2px;
padding-right: 2px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: #ddd;
}
&:active {
color: grey;
}
}
}
I don't see any need of Flexbox here...You can do it without flexbox. 我在这里看不到Flexbox的任何需求...您可以在没有Flexbox的情况下做到这一点。
Also for symbols try to use html entities here instead of direct symbol 另外对于符号,请尝试在此处使用html实体代替直接符号
* { box-sizing: border-box; } .control-wrap { width: 20px; margin: 0px 10px; border: 1px solid; height: 30px; } .caret-wrap { cursor: pointer; font-size: 8px; height: 50%; text-align: center; padding: 2px; background: red; } .caret-wrap:hover { background: #ddd; } .caret-wrap:active { color: grey; }
<div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div> <div class="caret-wrap"> <span class="caret">▼</span> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.