首页 > web前端 > js教程 > jquery使用on绑定mouseleave事件与mouseenter事件实现鼠标hover事件的实例分析

jquery使用on绑定mouseleave事件与mouseenter事件实现鼠标hover事件的实例分析

黄舟
发布: 2017-06-28 10:00:01
原创
1916 人浏览过

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

//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");

登录后复制



以上是jquery使用on绑定mouseleave事件与mouseenter事件实现鼠标hover事件的实例分析的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板