TaxtArea中内嵌一张放松图片,该图片实现属性悬浮放大功能

TaxtArea中内嵌一张发送图片,该图片实现属性悬浮放大功能,离开还原效果,点击发送按钮后,发送图片变为loading,

<div class="textarea-wrapper" ><a-textarearef="textArea"v-model.trim="problem":rows="3"style="resize: none;height:73px;"placeholder="请输入问题" ></a-textarea><div class="image-inside sendImg"><img v-if="!loading" class="zoom" @click="sendSession('1')" src="../../../assets/img/custconcquest/send.png"></div><div class="spin-inside"><a-spin v-if="loading" style="padding: 0" /></div></div>

css

.textarea-wrapper {position: relative;}.image-inside {position: absolute;float: right;right: 50px;bottom: 45px;
}
.spin-inside {position: absolute;float: right;right: 40px;bottom: 20px;
}/* textArea 内的图片, 实现鼠标悬浮放大缩小功能 */
.sendImg {position: relative;text-align: center;width: 50px;height: 30px;
}
.zoom {position: absolute;width: 100%;  /* 图片将填充整个容器 */height: 100%;  /* 图片将填充整个容器 */transition: transform 0.2s ease-in-out;  /* 这将使图片在悬浮时产生放大效果 */
}
.sendImg:hover .zoom {transform: scale(1.2);  /* 当鼠标悬停在容器上时,图片将放大1.2倍 */
}

效果
在这里插入图片描述

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

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

相关文章

javafx可视化java编程入门教程

JavaFX是一个用于构建富客户端应用程序的开发框架。它提供了丰富的图形界面和多媒体功能,并且非常易于学习和使用。本文将带你从入门到精通JavaFX,让你了解如何使用JavaFX构建出色的界面和交互式应用程序。 第一部分:入门 JavaFX的入门非常简单。首先,你需要安装JavaFX开…

【C盘爆满系列二,留个笔记下次用】

C盘爆满系列二 这次遇到的c盘爆满的清空&#xff0c;始终未检测出具体原因1、系统休眠文件2、WinSxS 这次遇到的c盘爆满的清空&#xff0c;始终未检测出具体原因 使用这个扫描软件&#xff0c;扫描出了问题&#xff0c;主要占有存储的有两个大的方面。 1、系统休眠文件 因为…

借助图形控件Aspose.Tasks,在 C# 中将 XER 转换为 SVG

Primavera P6 是一款流行的项目管理软件&#xff0c;它使用XER 文件格式来存储项目数据。 SVG&#xff08;即可缩放矢量图形&#xff09;是一种流行的矢量图像格式&#xff0c;可用于为 Web 和打印应用程序创建可缩放图形。在某些情况下&#xff0c;我们可能需要以编程方式将 P…

唯众成功入选“全国基础软件安全可信行业产教融合体”理事单位

12月15日&#xff0c;全国基础软件安全可信行业产教融合共同体成立大会在武汉隆重召开。武汉唯众智创科技有限公司作为受邀嘉宾参加了成立大会。大会公布了共同体成员单位名单&#xff0c;唯众成功当选理事单位。 全国基础软件安全可信行业产教融合共同体 全国基础软件安全可信…

C++学习笔记(十五)

一、继承 继承是面向对象三大特性之一 有些类与类之间存在特殊的关系&#xff0c;例如下图中&#xff1a; 我们发现&#xff0c;定义这些类时&#xff0c;下级别的成员除了拥有上一级的共性&#xff0c;还有自己的特性。 这个时候我们就可以考虑利用继承的技术&#xff0c;减…

ArkTS-一次开发,多端部署

展示 官方代码适配解读 官方代码&#xff1a;一次开发&#xff0c;多端部署-视频应用 解读 适配多端&#xff1a;根据屏幕大小来判断不同客户端&#xff0c;BreakpointSystem.ets中引入官方API获取 ohos.mediaqueryCommonConstants.ets定义好不同屏幕范围大小&#xff0c;供需…

【C++】map和set的模拟实现

map和set的模拟实现 插入模拟实现正向迭代器模拟实现插入完整实现map的[ ]接口模拟实现正向迭代器完整代码反向迭代器模拟实现 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 在前面几篇C的博客&#xff0c;讲过了二叉搜索树&#xff0c;AVL树&#xff0c;红黑…

生物识别银行行业分析:预测2025年市场规模将达到930.5亿元

据不完全统计&#xff0c;多家银行曾申请多模态生物识别技术相关专利。虽然部分专利被驳回或撤回&#xff0c;仍可体现银行在多模态生物识别技术上的探索。 生物识别银行专利提供一种基于人脸和语音双重识别的转账方法。包括&#xff1a;第一用户的客户端获取第二用户的生物特征…

http跟https的区别

只要上过网的朋友一定接触过“HTTP”&#xff0c;每次开网页的时候&#xff0c;不管是什么网址&#xff0c;其前面都会出现HTTP字样&#xff0c;比如 “http&#xff1a;55049sjad.com”、“http&#xff1a;544.65.5.6.com”等等&#xff0c;而有些时候打开如银行等对安全性要…

堆与二叉树(上)

本篇主要讲的是一些概念&#xff0c;推论和堆的实现&#xff08;核心在堆的实现这一块&#xff09; 涉及到的一些结论&#xff0c;证明放到最后&#xff0c;可以选择跳过&#xff0c;知识点过多&#xff0c;当复习一用差不多&#xff0c;如果是刚学这一块的&#xff0c;建议打…

R语言——基本操作(一)

目录 一、基本操作 二、R包的安装及使用 三、获取帮助 四、内置数据集 五、数据结构 六、向量索引 七、向量运算 参考 Rstudio 控制台常用快捷键 Ctrl ↑ &#xff1a;查看所有历史记录&#xff0c;比直接使用 ↑ 查找更方便 Esc&#xff1a;中断操作&#xff0c;可中…

【网络安全】-Linux操作系统—VMWare软件

文章目录 VMWare软件的安装选择VMWare版本下载VMWare安装过程 VMWare的常用操作创建新的虚拟机配置虚拟机启动和关闭虚拟机安装VMWare Tools VMWare的克隆和快照克隆&#xff08;Clone&#xff09;快照&#xff08;Snapshot&#xff09; 总结 VMWare是一种流行的虚拟化软件&…