js(Jquery)結合layui框架tip彈出層實現鼠標懸停彈出提示層，鼠標移開提示層消失的方法

要實現上圖所示的效果，即鼠標移到問號元素上，彈出提示信息，鼠標移開後提示層消失的效果，方法有三種：

方法一：

用原始的js實現，即在鼠標要懸停的元素上添加onMouseOver和onMouseOut捕獲鼠標事件。（過期的方法）。

方法二：（推薦使用）

JQuery的 mouseover()和mouseout()方法。例如使用此方法結合layui前端框架的tip提示層實現上述效果代碼以下：

HTML代碼片斷：

<th>短信簽名&nbsp;<i id="dxqm" class="layui-icon layui-icon-help" style="font-size: 12px; color: #ff0000;"></i></th>

js代碼片斷：

        var tip_index;

        $("#dxqm").mouseover(function(){
            tips_index =layer.tips('是指短信內容裏【】裏的內容，通常用於寫店鋪簡稱，好比短信內容是：「用戶1888888888於2020-03-24 15:33:20在本店購物獲贈積分20分【永惠百貨】」。其中「永惠百貨」即爲短信簽名',this,{time:0});
        });
        $("#dxqm").mouseout(function(){
            layer.close(tips_index);     //關閉彈出層索引
        });    

 

方法三：

jQuery hover() 方法（強力推薦）
語法：$(selector).hover(inFunction,outFunction)
hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數，分別是鼠標進入是執行的函數和鼠標移開時執行的函數。
此方法結合layui前端框架的tip彈出層實現以上效果代碼以下：

HTML代碼片斷：

<th>短信簽名&nbsp;<i id="dxqm" class="layui-icon layui-icon-help" style="font-size: 12px; color: #ff0000;"></i></th>

js代碼片斷：

 var     tip_index;
$("#dxqm").hover(function(){
tips_index = layer.tips('是指短信內容裏【】裏的內容，通常用於寫店鋪簡稱，好比短信內容是：「用戶1888888888於2020-03-24 15:33:20在本店購物獲贈積分20分【永惠百貨】」。其中「永惠百貨」即爲短信簽名',this,{time:0});
},function(){
    layer.close(tips_index);
});