怎么实现鼠标移动到图片上显示按钮呢？

高玩的智熄操作 2023-05-10 20:19:53

用elementui写了一个上面这种图片网页，想实现鼠标移动到图片上面时显示一些按钮

就像up-load组件的照片墙那种效果，鼠标移到上面会显示放大和删除按钮，这种要怎么实现呢？大佬们求教~

...全文

8441 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

这不是去幼儿园的校车 2023-05-29

打赏
举报

回复

1.在图片所在div设置相对定位
2.在图片div里嵌套一个div设置绝对定位，并且设置背景颜色为透明rgba(0,0,0,0)
3.div里就正常写两个图标样式
4.设置该div的鼠标移入样式背景颜色rgba(0,0,0,0.5)

重写CStatic类，vc中利用GDI和PictureControl（Picture控件）实现png图片按钮的功能，可以设置按钮初始、鼠标按下、鼠标松开、鼠标移动到控件上4中状态下的png图片。vs2010下运行通过

这是duilib教程【2013 duilib入门简明教程 -- 完整的自绘标题栏(8) 】的按钮图片资源

用Qt实现这样一个效果，当鼠标悬浮到图片上时，显示删除字样，当点击删除时删除该图片。常用在注册页面。例：实现方法：用QLabel展示图片，再用一个QPushButton覆盖在图片上，按钮背景设置为透明，当鼠标移动到图片上时按钮显示，其他情况按钮隐藏。删除图片在点击删除按钮时进行。因此需要重写鼠标移动事件： void MainWindow::mouseMoveEvent(QMouseEvent *event) { QRect rect(ui->label->pos(), ui->

css如何实现鼠标移至图片上显示遮罩层及文字问题：一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字 html: <div class="contentimg"> <span class="img_content"> <a href="http://www.eltran.cc/" target="view_frame"

然后遮罩层用定位的方式，定在图片上，设置好背景色和大小，一开始的时候透明度opacity设置为0，这样就看不到上面的遮罩层。这是一张图片，我希望鼠标移动到上面的时候显示一个遮罩层，层级上有两个按钮，一个查看，一个删除。首先是要写一个大盒子包裹两个部分，一个是图片部分，一个是遮罩层部分，然后再用CSS样式控制。然后当鼠标移动到图片上的时候，将遮罩层的透明度设置不为0，这样遮罩层就显示出来了。

61,124

社区成员

60,714

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章