鼠标放到搜索框搜索图标消失怎么解决

哥斯拉 · 发表于 2021-12-16 12:33:46

马上注册，免费下载更多dz插件网资源。

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

×

鼠标放到搜索框中搜索小图标就会消失，如何让它不消失啊

鼠标放到搜索框搜索图标消失怎么解决鼠标,放到,搜索,搜索框,搜索图

找了一下文件，应该是在下面这个文件里修改，但是本人基本属于代码小白，求大佬告知改哪个属性

鼠标放到搜索框搜索图标消失怎么解决鼠标,放到,搜索,搜索框,搜索图

谢谢！

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-13 03:51:24

要解决搜索图标在鼠标悬停时消失的问题，可通过CSS调整元素的显示属性。以下是详细操作步骤：

1. **定位样式文件**
找到当前模板目录下的CSS文件，路径一般为：
`template/您的模板目录/common/module.css`
（常见于Discuz! X3.4的默认模板）

2. **修改悬浮状态样式**
在CSS文件中查找以下代码段：

.sec .searchform .searchbtn:hover i { display: none }

复制代码

将其中的`display: none`改为：

.sec .searchform .searchbtn:hover i {
display: inline-block !important;
opacity: 0.8; /* 可选项：添加悬停透明效果 */
}

复制代码

3. **扩展建议**
若希望优化交互效果，可增加过渡动画：

.sec .searchform .searchbtn i {
transition: all 0.3s ease;
}
.sec .searchform .searchbtn:hover i {
transform: scale(1.1);
opacity: 1;
}

复制代码

4. **清除缓存**
修改后需到后台：
① 界面 » 风格管理 » 更新CSS缓存
② 工具 » 更新缓存

**排查技巧：**
1. 浏览器按F12打开开发者工具
2. 使用元素选择器定位搜索按钮
3. 在"Styles"面板查看激活状态的`:hover`样式
4. 注意检查是否有!important优先级标记

若仍有异常，建议检查模板中是否包含第三方插件的冲突样式，可通过暂时关闭插件排查问题。对于深度定制需求，推荐访问DZ插件网(https://www.dz-x.net)获取专业技术支持。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-17 14:31:38

作为DZ插件网的技术支持，这个问题可以通过调整CSS样式来解决。根据您的描述，需要修改以下部分：

1. 在template/当前模板目录/common/common.css中找到以下代码段：

.searchform .searchbtn:hover {
display: none;
}

复制代码

2. 将上述代码中的`display: none;`改为：

.searchform .searchbtn:hover {
opacity: 0.8; /* 改为透明度变化 */
cursor: pointer; /* 保持指针样式 */
}

复制代码

或者完全删除这段:hover样式。

如果找不到确切位置，也可以在common.css文件末尾追加：

#scbar_btn:hover {
visibility: visible !important;
}

复制代码

修改完成后：
1. 后台更新CSS缓存
2. 强制刷新浏览器缓存（Ctrl+F5）

这个调整不会影响搜索功能正常使用，只是修改了视觉效果。建议修改前备份原文件，如果仍有疑问欢迎继续反馈。

（注：本解决方案适用于Discuz X3.4及多数衍生版本，修改前请通过FTP下载备份相关文件）
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。