将layer的tips弹窗改为滑过显示(layui)

2个月前 (12-06) 浅唱丶
3分钟
79
0

开发主题时使用了layer组件,在做tooltips时发现layer提供的tips弹窗默认是点击后显示的效果,想改成鼠标滑过显示滑出隐藏该怎么实现呢?可以通过mouseentermouseleave事件轻松实现。

注意:需要提前引入layer必要的JS和CSS文件

方法参数

首先要了解 layer.tips 方法的参数。

layer.tips(content, follow, options)
  • [content] :(必填)显示的内容可以是字符串,也可以是html代码
  • [follow]:(必填)依附的元素,一般用id表示
  • [options]:额外参数(可选)tips的配置型[tips位置:1上;2右;3下;4左,字体的颜色]

代码示例

layer.tips(msg, ‘#id’,{tips: 1},time:10000)

// 这里没有引入layer插件,实际使用前必须引入
<div style="text-align: center;padding:200px 0;">
    <span id="tooltips">鼠标放上来试试</span> 
</div>
<script> 
$(function(){ 
    var tips; 
    $('#tooltips').on({ 
        mouseenter:function(){ 
            var that = this; 
            tips = layer.tips("欢迎访问小菜的IT网https://www.xiaocaiit.cn",that,{tips:[1,'#000'],time:0,area: 'auto',maxWidth:500}); 
        }, 
        mouseleave:function(){ 
            layer.close(tips); 
        } 
    }); 
}) 
</script>

效果如下:

将layer的tips弹窗改为滑过显示(layui)
本文由:浅唱丶 发布于 小菜的IT网,转载需注明出处:https://www.xiaocaiit.cn/560.html
浅唱丶
作者

相关推荐

1个月前 (12-23)

Plyr-简单、轻量、灵活的HTML媒体播放器

Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器,包含自定义的控制选项和 WebVTT 字幕。它是只支持现代浏览器,轻量,方便和可定制的媒体播放器。还有的标题和屏幕阅读器的全面支持。 特性: 可访问性 – 完全...
2个月前 (12-08)

宝塔(bt)面板出现无法打开时怎么办?

出现宝塔面板打不开的情况时怎么办?很多同学都遇到过在安装服务器宝塔面板打不开的情况,有些是导致网站无法打开,有些是网站可以打开但是宝塔面板确无法正常登录的情况,那么是什么原因导致的呢?下面整理了一些常见的解决办法。 1、检查服务器运行状态是...
2个月前 (12-07)

压缩网页使用的字体库(附思源黑体精简版下载)

在做web开发会使用到非标准字体,但是通常在网页中下载的字体库非常大,并且其中大部分都是不常用到的字体。在web项目中运行时会导致缓慢,我们可以通过删除不常用字体的方式减少中文字体库体积。 精简效果 思源黑体是一款可以免费商用的字体,刚好项...
2个月前 (12-06)

去除bootstrap中按钮的蓝色边框

使用bootstrap框架时的同学可能都会遇到,其中的按钮组件在点击选中时候,会显示一圈蓝色的边框,和自己本身网站的风格十分不搭,应该怎么去掉呢。 通过css:focus伪类添加样式即可去除 .btn:focus{ outline:0!im...
2个月前 (12-02)

PHP删除清空session的几种方式

session对于开发者来说肯定都不陌生,作为一种客户端与网站服务器之间更为安全的交互方式。一旦使用了session会话,便可以在网站的任何页面使用,从而让访问者与网站之间建立了一种较为安全的“对话”机制。 Session其实就是一个数组A...

评论

已有0人参与了评论

扫一扫关注我们