在父DIV中编写移入显示悬停的子DIV

Mykeyb2004

7111219

发布于
2017-06-14

代码如下，可点击链接查看运行效果。

链接描述

原意是希望蓝色区域在鼠标移入后再悬浮显示，但实际情况为显示会导致底层文字转行。请问我该如何调整这个CSS，恳请朋友们不吝赐教，谢谢！

css

阅读 3.4k

3 个回答

得票最新

kikong

19.1k31320

发布于
2017-06-14

✓ 已被采纳

你需要设置悬浮元素的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>

高速蜗牛

发布于
2017-06-14

新手上路，请多包涵

蓝色div绝对定位，不占DOM流，文字就不会换行了，但是如果蓝色div有可能会遮盖文字。