Layer tips实时悬浮显示隐藏

最新推荐文章于 2024-08-10 03:21:51 发布

原创最新推荐文章于 2024-08-10 03:21:51 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php

经验随笔专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用HTML、JavaScript和自定义样式实现Layer提示框的实时悬浮显示与隐藏功能，适用于网页交互增强。通过引用提供的代码段，开发者可以调整样式和位置以满足自己的需求。

引用：

<script src＝"//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href＝"//cdn.bootcss.com/layer/3.0.1/skin/default/layer.css" rel＝"stylesheet">
<script src＝"//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

HTML：

<span tan="啦啦啦"></span>

JS：

$('span').on({ 
     mouseenter:function(){ 
         var that = this; 
         var nei = $(this).attr("tan"); 
         if(nei){ 
             tips =layer.tips("<span style='color:#000;font-size:20px;'>"+nei+"</span>",that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500}); 
         } 
     }, 
     mouseleave:function(){ 
        layer.close(tips); 
    } 
 });

样式和位置可自己修改

原文地址：

Layer tips实时悬浮显示隐藏 - 苏慕白的博客