使用 onMouseOver 在图标下方显示小文本的方法

Question

我正在使用 React，我想制作一个 onMouseOver 以显示一个小文本

onMouseOver={(e) => { alert('Set to started'); }}

我试过这个动作，但它在顶部制作了一个 HTML 警报。我只想要一个小文本。

我好像找不到显示它的东西

Answer 1

alert

是

window

对象的函数。它的默认行为是显示一个模式，以防止用户在对话框关闭之前访问程序界面的其余部分。您可以在这里阅读更多内容：Window: alert() method.

为了实现你的愿望，你应该创建一个元素，如

div

或

p

并为其设置样式

display: none

或

display: block

，具体取决于状态，例如

[error, setError] = useState('')

.

顺便说一句，使用这种方法，请记住与

onMouseLeave

一起实现

onMouseOver

，因为状态不会自动恢复到其原始值。

这是一个适合您的工作示例。希望对您有所帮助。

import { useState } from 'react'

export default function Test() {
  const [error, setError] = useState('')

  return (
    <div>
      <h1
        onMouseOver={() => setError('[Your error message here]')}
        onMouseLeave={() => setError('')}
      >
        Hover me!
      </h1>
      <h4 style={{
        color: 'red',
        display: error === '' ? 'none' : 'block'
      }}>
        {error}
      </h4>
    </div>
  )
}