通过hover来控制一个div的展示和隐藏

Posted 2020-09-02

css 代码：

.float_tips_area {
    position:absolute;
    background-color: #ffffff;
    border-radius: 5px;
    display:none;
    right:20px;
    width:70%;
    z-index: 1000;
  }
.mgf_tips_icons{
    display:inline-block;
    padding-left: 5px;
  }
.mgf_tips_icons:hover .float_tips_area{
     display:block;
     border: 1px solid #dedede;
  }

html代码：

<div class="mgf_tips_icons">
        <img src="./img/info_tips.png" width ="26" height = "24"/>
        <div class="float_tips_area">

        <div class="text_title">违约金说明</div>
            <div class="text_desc">
              您已签约工行自动扣款协议，每月10号还款日将从您的还款银行卡(<span id="mgf_dxd_accno"></span>)
              中自动扣除，请确保还款银行卡内资金充足。</div>
            <div class="float_tips_ok">确&nbsp;&nbsp;定</div>
        </div>
      </div>

 

注意：要确保弹出的div在hover浮层div的内部。