鼠标悬浮一行弹出提示文本说明效果

日期: 2022-12-08 13:44:35 分类: 前端浏览量：留言数： 98500

有时候，我们希望能够再鼠标悬浮一行的时候弹出提示说明效果。

下面就通过代码实例介绍一下如何使用jquery实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#leo {
  position: absolute;
  border: 1px solid grey;
  opacity: 0.8;
  background: grey;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  x = 5;
  y = 15;
  $("p").hover(function (e) {
    otitle = this.title;
    this.title = "";
    var ndiv = "<div id='leo'>" + otitle + "</div>";
    $("body").append(ndiv);
    $("#leo").css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    }).show(2000);
    $(this).mousemove(function (e) {
      $("#leo").css({
        "top": (e.pageY + y) + "px",
        "left": (e.pageX + x) + "px"
      }).show(1000);
    });
  }, function () {
    this.title = otitle;
    $("#leo").remove();
  });
});
</script>
</head>
<body>
  <p title="犀牛前端部落一">只有努力奋斗才会有美好的未来。</p>
  <p title="犀牛前端部落二">犀牛前端部落欢迎您，欢迎提供建议和意见。</p>
  <p title="犀牛前端部落三">本站的url地址是pipipi.net。</p>
  <p title="犀牛前端部落四">只有当前的时间才是最为珍贵的。</p>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.x = 5和y = 15，用来规定弹出的层距离鼠标指针的距离。

（3）.$("p").hover(function (e) {}, function () {})，为p元素注册事件处理函数，也就是规定鼠标悬浮和鼠标离开要执行的函数。

（4）. otitle = this.title,获取当前鼠标悬浮的p元素的title属性值，并赋值给变量otitle。

（5）.this.title = ""，这个代码和上一段代码的目的是为了防止默认的title弹出层的出现，我们要显示的是自定义的。

（6）.var ndiv = "<div id='leo'>" + otitle + "</div>"，这是弹出的自定义信息层。

（7）.$("body").append(ndiv)，追加到body中。

（8）.$("#leo").css({

"top": (e.pageY + y) + "px",

"left": (e.pageX + x) + "px"