How do I control the display of other components when I click the mouse?

1. Usage scenarios

When our components need to add description information, and the description information is too much, which makes it unattractive and inconvenient, we can display the description information by sliding the mouse, and the function of automatically hiding the description information when the mouse is drawn out, to make the page more beautiful, we can learn how to achieve the above effect through this case.

2. Video Display

此处为语雀视频卡片，点击链接查看：0630-孙慧爽-鼠标滑过时控制组件显隐.mov

3. Procedure

3.1 Step 1: Create a form

Add a single-line text component and a graphic display component to the page.

Form editing page

3.2 Step 2: Set description information in the graphic display

Set advanced content

To edit the content to be displayed, you can set the font color, size, and so on according to your needs.

Add description

3.3 Step 3: write code in the didMount function to control the display and concealment of graphic components

JS panel

Reference Code (can be copied directly, pay attention to modifying the unique identifier)

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. Final effect

5. Try it online

https://www.aliwork.com/bench/coe? tplUuid=TPL_T150R6Q3YXB3N8Y17UCL

-------------------- Get the latest information YIDA, welcome to follow US--------------------