请选择进入手机版 | 继续访问电脑版

登录/注册

首页 › 活字格专区 › 求助中心 › 查看内容

30 主题	90 帖子	550 积分

积分: 550

5020
金币
30
主题
90
帖子

最新发帖

[已处理] 【8.0.102】使用组件组装一个下拉选择框，希望下拉选择框获得焦点后，显示一个保存

金冈
中级会员 / 发表于：2022-10-29 11:17 / 查看：1650 / 回复：4

1金币

本帖最后由金冈于 2022-10-29 13:52 编辑

【8.0.102】使用组件组装一个输入框，希望输入框获得焦点后，显示一个保存图片
CSS设成这样

.suo{display:none;}
.pen{display:none;}
.fieldsave{display:none;}
.inputonlyread:hover .suo{display:block;}
.inputwrite:hover .pen{display:block;}
.inputwrite:hover {background-color:#E3F3FF;}
.inputwrite:focus .fieldsave{display:block;}

但运行发现，hover生效，但focus没生效。

我把输入框的ID找到
CSS设成这样
#r1c1p2:focus .fieldsave{display:block;}
也不行

求怎么解决？

附件: 您需要登录才可以下载或查看，没有帐号？立即注册

最佳答案

查看完整内容

功能实现了在CSS中 .inputwrite:focus-within .fieldsave{display:block;} 即inputwrite是**div，他里面的input获得焦点就显示fieldsave图标配合hover,就可以实现输入内容后，点击“保存”图标的功能。

收藏

回复

4 个回复

最佳答案

最佳答案

金冈
中级会员 / 发表于：2022-10-29 11:17:47 来自 6^#

功能实现了

在CSS中
.inputwrite:focus-within .fieldsave{display:block;}
即inputwrite是**div，他里面的input获得焦点就显示fieldsave图标

配合hover,就可以实现输入内容后，点击“保存”图标的功能。

本帖子中包含更多资源

您需要登录才可以下载或查看，没有帐号？立即注册

x

回复 使用道具举报

金冈
中级会员 / 发表于：2022-10-29 12:14:32 3^#

duxp 发表于 2022-10-29 11:49
要这个显示出来吗？

是的，输入框获得焦点后，显示“保存”图片

回复 使用道具举报

金冈
中级会员 / 发表于：2022-10-29 12:40:56 5^#

duxp 发表于 2022-10-29 12:19
这样设置了吗？

保存图标的class是fieldsave
笔型图标的class是pen

希望hover时，显示笔，获得focus时，显示保存

回复 使用道具举报

Chelsey.Wang
论坛元老 / 发表于：2022-10-31 09:19:40 7^#

恭喜楼主自己解决了问题，并且还主动分享

后续遇到问题，欢迎继续发新帖交流哦~

回复 使用道具举报