如何在鼠标划过时控制其他组件显隐?
1. 使用场景
当我们的组件需要添加描述信息,而描述信息过多导致不美观不便捷时,可以通过鼠标滑过时展示描述信息,鼠标划出时就自动隐藏描述信息的功能,使页面更加的美观,那么我们可以通过本案例来学习如何实现上述效果。
2. 视频展示
3. 操作步骤
3.1 步骤一:创建一个表单
在页面当中添加一个单行文本组件和一个图文展示组件。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641952046394-4f73d92b-bce3-47bf-9d36-87042629ecc0.png)
表单编辑页面
3.2 步骤二:在图文展示里面设置描述信息
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641952073887-9f1c9b5a-1ac2-46a9-b90a-631aa6d93afc.png)
设置高级内容
编辑需要展示的内容,可以根据自己需求设置字体颜色、大小等等。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641952107815-269271ce-c62b-4060-a603-0aa4ddc368a6.png)
添加描述信息
3.3 步骤三:在 didMount 函数中编写代码来控制图文组件的显隐
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625024601710-7af868e3-482d-411f-b591-f3516d266079.png)
JS 面板
参考代码(可直接复制,注意修改唯一标识)
export function didMount() {
let input = document.getElementById("textField_kqbroycz")
let text = document.getElementsByClassName("mce-content-body")[0]
text.style.display = "none"
input.onmousemove = function () {
text.style.display = "block"
}
input.onmouseout = function () {
text.style.display = "none"
}
}
4. 最终效果
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641952145691-2e8f8fe6-6498-456f-b7d9-0edf16fc8c39.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641952175360-d4533d9d-a6f3-4396-82fd-1c70ecbed757.png)
5. 在线试玩
https://www.aliwork.com/bench/coe?tplUuid=TPL_T150R6Q3YXB3N8Y17UCL
--------------------获取宜搭最新信息,欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)
本文档对您是否有帮助?