Js+Css實現鼠標懸浮在特定位置，顯示提示信息

想實現的效果就是數據懸浮在“？”上時出現一個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%;
    }