码上敲享录 > CSS简单实例分享 > css实现鼠标触碰时显示提示框,鼠标移开时隐藏提示框

css实现鼠标触碰时显示提示框,鼠标移开时隐藏提示框

上一章章节目录 2019-12-11已有139人阅读 评论(0)

css实现鼠标触碰时显示提示框,鼠标移开时隐藏提示框


解决方法:

<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

   <title></title>

<style>

  .modal-title .icon-mutex {

   font-size: 16px;

   color: #2bb7c5;

   text-align: center;

   line-height: 20px;

   cursor: pointer;

   position: relative;

   display: inline-block;

   width: 20px;

   height: 20px;

   position: relative;

   border: 1px solid #2bb7c5;

   border-radius: 50%;

   margin-left: 10px;


}

.modal-title .icon-mutex:hover {

   color: #2bb7c5;

}

.modal-title i {

   width: 250px;

   display: none;

   position: absolute;

   left: -19px;

   top: 27px;

   font-size: 12px;

   font-style:normal;

   color: #fff;

   text-align: left;

   background-color: rgba(1,1,1,0.7);

   padding: 3px 5px;

   z-index: 2;

}

.modal-title .icon-mutex:hover i {

   display: block;

}

.modal-title i::before {

   display: inline-block;

   width: 0;

   height: 0;

   content: '';

   margin-left: 2px;

   vertical-align: middle;

   border-bottom: 6px solid #010101b3;

   border-right: 6px solid transparent;

   border-left: 6px solid transparent;

   position: absolute;

   top: -5px;

   left: 20px;

}

</style>

 </head>

 <body>

   <span class="modal-title" >

     <a  class="icon-mutex">?<i  class="mutex-tip">提示内容:这里是提示框!</i></a>

           </span>

 </body>

</html>


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
向大家推荐《ireport实战教程》:https://xiaozhuanlan.com/ireport?rel=6923152725
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交