DIV鼠标移入背景变暗,并显示播放按钮

效果图

1.创建DIV

          <div class="entry" @click="handlePlay"><img class="img1" src="../../assets/HomePage/icon_img77.png" alt=""><img class="img2" src="../../assets/HomePage/icon_img78.png" alt=""><img class="img3" src="../../assets/HomePage/icon_img79.jpg" alt=""><img class="img4" src="../../assets/HomePage/icon_img80.png" alt=""></div>

2.设置CSS样式

      .entry {flex: 1;background: #ccc;margin-left: 2rem;position: relative;border-radius: 0.2rem;box-shadow: 0 0.2rem 0.5rem #ccc;height: 23.9375rem;.img1 {position: absolute;width: 8.625rem;top: -4rem;right: -4rem;z-index: 1;}.img2 {position: absolute;width: 20.5rem;top: 2rem;right: -14rem;z-index: 1;}.img3 {width: 100%;height: 100%;border-radius: 0.2rem;// opacity: 0.5;// filter: grayscale(50%);}.img4 {display: none;position: absolute;top: 9.5rem;left: 18.5rem;width: 4.5rem;z-index: 1;cursor: pointer;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/595699.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构—图

图的基本概念 图就是由顶点的有穷非空集合和顶点之间的边组成的集合。通常表示为&#xff1a;G(V,E)&#xff0c;其中&#xff0c;G 表示一个图&#xff0c;V 表示顶点的集合&#xff0c;E 表示边的集合。 顶点 图中的数据元素&#xff0c;我们称之为顶点&#xff0c;图至少有…

【毕业论文】酒店价格采集与可视化查询设计与实现开题报告2000字

酒店价格采集与可视化查询设计与实现开题报告 研究背景 随着互联网技术的飞速发展&#xff0c;人们获取信息的途径越来越多样化。特别是在旅游行业中&#xff0c;消费者对于酒店价格的透明度和实时性要求越来越高。美团、大众点评、抖音等平台作为信息聚合和分享的重要渠道&a…

springboot汉服推广网站

摘 要 本论文主要论述了如何使用JAVA语言开发一个汉服推广网站 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述汉服推广网站的当前背景以及系统开发的目的&am…

C#手术麻醉信息系统源码,技术框架:Vue,Ant-Design+百小僧开源框架

C#手术麻醉信息系统源码&#xff0c;技术框架&#xff1a;Vue&#xff0c;Ant-Design百小僧开源框架 手术麻醉系统主要用于在手术过程中监测和控制患者的状态&#xff0c;确保手术的顺利进行并保障患者的生命安全。该系统通过一系列先进的医疗设备和技术&#xff0c;为手术患者…

聊天应用与开发框架LobeChat

自从 OpenAI 宣布用户无需注册账号即可使用 ChatGPT 后&#xff0c;Github 上多了很多利用免登录 ChatGPT Web 提供的无限制免费 GPT-3.5-Turbo API 服务的应用&#xff0c;像 FreeGPT35、aurora 等等 之前有很多 AI 应用&#xff0c;因为没有 OpenAI Key而放弃&#xff0c;现…

深度学习pytorch实战第P2周:CIFAR10彩色图片识别

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/0dvHCaOoFnW8SCp3JpzKxg) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊](https://mtyjkh.blog.csdn.net/)** 零、引言&#xff08;温故而知新&#xff…

在 Linux 中安装 MySQL 8.0.28【开放远程连接】

一、下载 MySQL8.0.28 MySQL :: Download MySQL Community Server (Archived Versions) 二、解压文件 将文件上传到 Linux 系统中&#xff08;此处不做展示&#xff09;&#xff0c;然后解压 三、安装 MySQL 接着检查系统中是否有 mariadb&#xff08;与 mysql 会有冲突&…

深入分析Linux上下文与上下文切换

Linux 进程运行空间与特权等级 在 Linux 操作系统中&#xff0c;进程的运行空间被划分为内核空间和用户空间&#xff0c;这种划分是为了保护系统的稳定性和安全性。这两个空间对应着 CPU 的特权等级&#xff0c;分别为&#xff1a; Ring 0&#xff08;内核态&#xff09;Ring…

Lightroom Classic 2024成就专业摄影梦想mac/win版

Lightroom Classic 2024是一款功能强大的数字图像处理和管理工具&#xff0c;专为摄影师和摄影爱好者设计。它提供了丰富的照片调整、处理、管理和分享功能&#xff0c;帮助用户轻松管理、编辑和展示他们的照片。 Lightroom Classic 2024软件获取 首先&#xff0c;Lightroom C…

晶核2024搬砖职业推荐!

在晶核手游的广袤世界中&#xff0c;选择一位适合自己的搬砖角色是每位玩家都必须认真考虑的事情。不同的职业拥有独特的技能和特点&#xff0c;能够在搬砖过程中发挥不同的优势。下面&#xff0c;我们将深入探讨晶核搬砖的四大利器&#xff0c;让你对每个角色有更深入的了解&a…

Linux网络管理类命令

ping -c&#xff1a;指定次数 -i n&#xff1a;指定发送频率 n 秒 -t&#xff1a;指定 TTL 值 -s&#xff1a;指定发送包的大小 ifconfig iproute netstat -anltp ss ssh 主机名 SCP wget nmap -A: 全面扫描 -p &#xff1a;端口 80 22-80 80,25,443 -sP &#xf…

Java集合(个人整理笔记)

目录 1. 常见的集合有哪些&#xff1f; 2. 线程安全的集合有哪些&#xff1f;线程不安全的呢&#xff1f; 3. Arraylist与 LinkedList 异同点&#xff1f; 4. ArrayList 与 Vector 区别&#xff1f; 5. Array 和 ArrayList 有什么区别&#xff1f;什么时候该应 Array而不是…