码迷,mamicode.com
首页 > Web开发 > 详细

Js+Css实现鼠标悬浮在特定位置,显示提示信息

时间:2019-10-30 09:13:27      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:mil   ali   提示信息   img   解释   上下   一个   解压   cal   

想实现的效果就是数据悬浮在“?”上时出现一个div,有一个解释说明,实现效果如下:

技术图片

 

 

 

1、首先实现“?”样式,在网址http://fontawesome.dashgame.com/ 上下载文件。解压后找到css文件夹下font-awesome.min.css

技术图片

 

 

 

html页面进行引用

 <link href="/static/font/css/font-awesome.min.css" rel="stylesheet" />

html代码

<i class="fa fa-question-circle" style="cursor: pointer;"></i>
<div class="demo" style="display:none">
    <div>
       <p>
          <span style="font-weight:600">您好:</span>该下班了。
       </p>
    </div>
</div>

Js代码实现鼠标滑动上显示div和鼠标离开后隐藏

$(function () {
    $(".fa-question-circle").hover(
    function () {
        $(".demo").show();

    });
    $(".fa-question-circle").mouseout(
        function () {
            $(".demo").hide(); //$(this).hide();      
        });
});

Css代码实现div显示在什么位置,大小和样式

   .fa-question-circle {
     cursor: pointer;//实现鼠标活动“?”变成小手
   }
   .demo {
      width: 300px;
      font-size: 12px;
      height: 85px;
      position: absolute;
      top: -10%;
      left: 0%;
      border: 2px solid #ffffff;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 2px 4px 5px #eeeaea;
    }

    .demo p {
     padding: 5px 8px;
    }

    .demo:after {
      content: ‘‘;
      position: absolute;
      border: 10px solid transparent;
      border-top-color: #ffffff;
      top: 100%;
      /*left: 37px;*/
      left: 37%;
    }

 

Js+Css实现鼠标悬浮在特定位置,显示提示信息

标签:mil   ali   提示信息   img   解释   上下   一个   解压   cal   

原文地址:https://www.cnblogs.com/xinbaba/p/11762835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!