Joseph.Wang 发表于 2024-6-28 14:29:18

监听鼠标移入图文列表

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

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

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

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


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


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

hubei333 发表于 2024-6-28 17:18:42

膜拜大神！:)

KinShing 发表于 2024-6-28 20:55:39

:hjyzw::hjyzw:

gczxxu 发表于 2024-6-28 21:40:40

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

遇见未知的自己 发表于 2024-6-29 11:05:49

:hjyzw::hjyzw::hjyzw:

137294886 发表于 2024-6-29 12:54:44

stranger 发表于 2024-6-30 20:00:38

这个挺好，学习

olookok 发表于 2024-6-30 20:42:58

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

牧野流云 发表于 2024-7-1 11:40:55

非常好，很实用！
页: [1]
查看完整版本: 监听鼠标移入图文列表