Jquery悬浮提示跟随鼠标

最新推荐文章于 2024-07-29 03:32:28 发布

大胖东

最新推荐文章于 2024-07-29 03:32:28 发布

阅读量335

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_42583263/article/details/118765221

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动悬浮提示</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 悬浮提示内容 -->
<div class="tip" style="display:none">hello, I am mobile</div>
<!-- 鼠标动作对象 -->
<div class="content">hover me</div>

<script>
 $(document).ready(function(){ // document.ready是指dom加载完成就可以，不需要图片和其他资源加载完就可以执行
  $('.content').hover(
   function(){
    $('.tip').fadeIn('slow'); // 淡入
   }
  );
  
  $('.content').mousemove(function(e){ // e为当前鼠标作用dom元素对象
   var top = e.pageY+5;
   var left = e.pageX+5;
   $('.tip').css({
    'top' : top + 'px',
    'left': left+ 'px'
   });
  });
  
  $('.content').mouseout(function(){
   $('.tip').hide();
  });
 });
</script>
</body>
</html>
<style type="text/css">
  /* 提示内容样式 */
  .tip{ 
    position:absolute;
    padding: 6px 5px; 
    background-color:#dddddd; 
    border-radius: 4px;
  }
  .content{
    width: 500px;
    height: 300px;
    border:1px solid #dddddd;
    cursor:pointer;
    display: inline-block;
    }
  </style>