>웹 프론트엔드 >JS 튜토리얼 >on을 사용하여 mouseleave 이벤트와 mouseenter 이벤트를 바인딩하여 마우스 호버 이벤트를 구현하는 jquery 분석 예

on을 사용하여 mouseleave 이벤트와 mouseenter 이벤트를 바인딩하여 마우스 호버 이벤트를 구현하는 jquery 분석 예

黄舟
黄舟원래의
2017-06-28 10:00:011882검색

//HTML脚本

<spandata-helperinfo="PortfolioTeam"class="icon help"></span>

//JS脚本

$(document).on({

mouseenter:function () {

var HelpMsgCode = $(this).attr("data-helperinfo");//Gets the current object property values

$.ajax({

type:"GET",

url:"/Portfolio/GetHelpMessageByCode",

//url: "/Subscription/GetHelpMessageByCode",

data: { Code: HelpMsgCode },

dataType:"json",

success:function (item) {

var varJson = $.parseJSON(item.data); //string Turn json

var varContent = varJson.Root.HelpMessage.Content; //Gets the specified JSON node contents

var varMsgHtml = "<span class=&#39;bubble&#39;>" + varContent + "</span>";//Structural HTML

$(".icon.help").append(varMsgHtml);//Additional HTML to a specified location

}

});

},

mouseleave:function () { //When the mouse leaves, a prompt box disappears

$(".icon.help").html("");//Emptying the balloon

}

},".icon.help");



위 내용은 on을 사용하여 mouseleave 이벤트와 mouseenter 이벤트를 바인딩하여 마우스 호버 이벤트를 구현하는 jquery 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.