gpt4 book ai didi

jquery实现鼠标悬浮弹出气泡提示框

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 34 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jquery实现鼠标悬浮弹出气泡提示框由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

jquery鼠标悬浮弹出气泡提示框,供大家参考,具体内容如下 。

居中的图片 。

jquery实现鼠标悬浮弹出气泡提示框

代码 。

我在网上找了很多例子都是单独的一个,所以我修改了jquery的一点代码,让它可以在一个页面上多次使用,原文的地址我没找到,相信我这个会更好一点.

//别忘了导入js文件! 。

?
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
< html >
< head >
  < meta charset = "utf-8" >
  < title >气泡显示</ title >
  < script type = "text/javascript" src = "../js/jquery-1.8.3.js" ></ script >
  < style type = "text/css" >
   .container {
    margin-top: 130px;
   }
   .tip {
    padding: 8px 12px;
    width: 140px;
    display: block;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    background: #ED5517;
    cursor: pointer;
    margin-left: 400px;
    align-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
   }
   .content {
    position: absolute;
    display: none;
    padding: 10px;
    width: 160px;
    background: #e0edf7;
    border-radius: 6px;
   }
 
   .content::before {
    content: "";
    position: relative;
    top: -20px;
    left: 10px;
    width: 0;
    height: 0;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e0edf7;
   }
  </ style >
</ head >
< body >
< div class = "container" >
  < span id = "xsztip" class = "tip" >鼠标悬停显示气泡</ span >
  < div class = "content" >
   < span >The quick fox jumps over a lazy dog.</ span >
  </ div >
  < span id = "xsztip2" class = "tip" >鼠标悬停显示气泡</ span >
  < div class = "content" >
   < span >The quick fox jumps over a lazy dog.</ span >
  </ div >
  < span id = "xsztip3" class = "tip" >鼠标悬停显示气泡</ span >
  < div class = "content" >
   < span >The quick fox jumps over a lazy dog.</ span >
  </ div >
</ div >
< script type = "text/javascript" >
  $(function(){
   $("#xsztip").hover(function(){
    show_xszimg(this);
   },function(){
    hide_xszimg(this);
   });
   $("#xsztip2").hover(function(){
    show_xszimg(this);
   },function(){
    hide_xszimg(this);
   });
   $("#xsztip3").hover(function(){
    show_xszimg(this);
   },function(){
    hide_xszimg(this);
   });
   function hide_xszimg(f){
    $(f).next().hide()
   }
   function show_xszimg(f){
    var c=$(f);
    var e=c.offset();
    var a=e.left;
    var b=e.top+40;
    $(f).next().css({left:a+"px",top:b+"px"}).show();
   }
  });
</ script >
</ body >
</ html >

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/qq_45966300/article/details/111563627 。

最后此篇关于jquery实现鼠标悬浮弹出气泡提示框的文章就讲到这里了,如果你想了解更多关于jquery实现鼠标悬浮弹出气泡提示框的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com