css - 在父DIV中编写移入显示悬停的子DIV
本文介绍了css - 在父DIV中编写移入显示悬停的子DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下，可点击链接查看运行效果。
原意是希望蓝色区域在鼠标移入后再悬浮显示，但实际情况为显示会导致底层文字转行。请问我该如何调整这个CSS，恳请朋友们不吝赐教，谢谢！
解决方案
你需要设置悬浮元素的position属性,并设置bk的position为relative
<html>
<body>
<style type="text/css">
.blue {
width: 200px;
height: 100px;
background: #09d;
margin: 10px;
display: none;
position:absolute;
right:0px;
top:0px;
}
.bk {
width: 500px;
height: 350px;
background: grey;
position: relative;
display: flex;
}
.bk:hover .blue {
display: block;
}
</style>
<div class="bk">
html如何让其中一个div浮在另一个div上面，html如何让其中一个div浮在另一个div上面。
<div class="blue"></div>
</div>
</body>
</html>这篇关于css - 在父DIV中编写移入显示悬停的子DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
