登录/注册

首页 › 活字格专区 › 格友杂谈 › 查看内容

41 主题	60 帖子	1439 积分

Rank: 8 Rank: 8

积分: 1439

1732
金币
41
主题
60
帖子

最新发帖

[资源分享] 监听鼠标移入图文列表

Joseph.Wang
超级版主 / 发表于：2024-6-28 14:29 / 查看：1142 / 回复：8

本帖最后由 Joseph.Wang 于 2024-6-28 15:02 编辑

图文列表可以自由灵活的定义数据的展示形式，因此想实现一些个性化或者更精美的展示效果，通常都会建议使用图文列表实现。
最近遇到了这样一个场景：在图文列表的模板页面中有个删除按钮，想要实现只有鼠标移入到图文列表时，才显示这个按钮，但目前只有单击/双击模板命令，并没有鼠标移入/移出的命令，思来想去，似乎只能通过监听鼠标事件来实现了，话不多说，上代码，搞起来。

首先看下最终实现的效果
鼠标移入图文列表.gif630411681.png

鼠标移入图文列表.gif630411681.png

接下来分享一下实现思路
1. 使用图文列表进行布局，在此不展开，可参考帮助文档
image.png513791808.png

image.png513791808.png

2. 按钮初始是隐藏状态，该场景下需要使用CSS进行设置。新建/上传CSS文件，设置按钮的CSS类名
image.png539049376.png

image.png539049376.png

image.png705912475.png

3. 在页面加载时，通过JS，获取到图文列表中的div元素，并且设置mouseover和mouseout事件
image.png252786864.png

image.png252786864.png

通过以上简单几步操作，就完成了，附件是对应的工程文件，大家可以参考，有更好的思路，也欢迎大家讨论分享哈~

鼠标进入图文列表后显示按钮.fgcc

136.86 KB, 下载次数: 231

收藏

回复

8 个回复

倒序浏览

hubei333
高级会员 / 发表于：2024-6-28 17:18:42 沙发

膜拜大神！

回复 使用道具举报

KinShing
中级会员 / 发表于：2024-6-28 20:55:39 板凳

回复 使用道具举报

gczxxu
银牌会员 / 发表于：2024-6-28 21:40:40 地板

，印象中，另一位版主也发过类似的。

回复 使用道具举报

遇见未知的自己
银牌会员 / 发表于：2024-6-29 11:05:49 5^#

回复 使用道具举报

137294886
金牌服务用户 / 发表于：2024-6-29 12:54:44 6^#

image.png559049987.png

回复 使用道具举报

stranger
银牌会员 / 发表于：2024-6-30 20:00:38 7^#

这个挺好，学习

回复 使用道具举报

olookok
论坛元老 / 发表于：2024-6-30 20:42:58 8^#

好，很好，非常好，特别的好！

回复 使用道具举报

牧野流云
初级会员 / 发表于：2024-7-1 11:40:55 9^#

非常好，很实用！

回复 使用道具举报