在 react 中悬停时显示元素或文本-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > react >

vue react javascript angular css html

在 react 中悬停时显示元素或文本

作者：迹忆客最近更新：2023/03/13 浏览次数：

在 react 中悬停时显示元素或文本：

在元素上设置 onmouseover 和 onmouseout 属性。
跟踪用户是否将鼠标悬停在状态变量中的元素上。
根据状态变量有条件地渲染另一个元素。

import {usestate} from 'react';
const app = () => {
  const [ishovering, setishovering] = usestate(false);
  const handlemouseover = () => {
    setishovering(true);
  };
  const handlemouseout = () => {
    setishovering(false);
  };
  return (
    <div>
      <div>
        <div
          onmouseover={handlemouseover}
          onmouseout={handlemouseout}
        >
          hover over me
        div>
        {ishovering && (
          <div>
            <h2>only visible when hovering divh2>
            <h2>jiyik.comh2>
          div>
        )}
      div>
    div>
  );
};
export default app;

react 中悬停时显示元素或文本

代码示例展示了如何在将鼠标悬停在另一个元素上时显示一个元素。

我们在 div 元素上设置了 onmouseover 属性，因此每次用户将鼠标悬停在该元素上时，都会调用 handlemouseover 函数。


  hover over me

当用户将光标移动到元素或其子元素之一时，将触发 mouseover 事件。

在我们的 handlemouseover 函数中，我们只需将 ishovering 状态变量设置为 true。

const handlemouseover = () => {
  setishovering(true);
};

相反，在我们的 handlemouseout 函数中，我们将状态变量设置为 false。

const handlemouseout = () => {
  setishovering(false);
};

当用户的光标不再包含在元素或其子元素之一中时，将触发 mouseout 事件。

我们使用逻辑与 && 运算符有条件地呈现另一个 div 元素。

逻辑与 && 运算符如果为假，则返回左侧的值，否则返回右侧的值。

如果状态变量存储假值，逻辑与 && 运算符将返回假，并且不会呈现任何内容。

忽略布尔值、null 和 undefined。他们根本不渲染。

当用户将鼠标悬停在 div 元素上时：

handlemouseover 函数被调用。
ishovering 状态变量设置为 true。
另一个 div 元素被渲染。

相反，当用户将光标移出 div 元素时：

handlemouseout 函数被调用。
ishovering 状态变量设置为 false。
另一个 div 元素不再显示。

在 react 中悬停时显示组件

将鼠标悬停在另一个元素上时，可以使用相同的方法来显示组件。

import {usestate} from 'react';
function heading() {
  return (
    <div>
      <h2>jiyik.comh2>
    div>
  );
}
const app = () => {
  const [ishovering, setishovering] = usestate(false);
  const handlemouseover = () => {
    setishovering(true);
  };
  const handlemouseout = () => {
    setishovering(false);
  };
  return (
    <div>
      <div>
        <div
          onmouseover={handlemouseover}
          onmouseout={handlemouseout}
        >
          hover over me
        div>
        {ishovering && <heading />}
      div>
    div>
  );
};
export default app;

在 react 中悬停时显示组件

当我们将鼠标悬停在 div 元素上时，代码示例会显示一个组件。

我们将一个 div 和一个 h2 提取到 heading 组件中。

每次用户将鼠标悬停在设置了 onmouseover 和 onmouseout 属性的 div 上时，都会显示 heading 组件。

当用户将鼠标移出 div 时，heading 组件将卸载并且不再呈现。

上一篇：在 react.js 中滚动到页面顶部

下一篇：在 react 中检查元素是否获取到焦点

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

node.js 与 react js 的比较

发布时间：2023/03/27 浏览次数：173 分类：node.js

本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。这些库用于构建用户界面和服务器端应用程序。

在 typescript 中 react usestate 钩子类型

发布时间：2023/03/19 浏览次数：246 分类：

本教程演示了如何在 typescript 中使用 react usestate hook。

typescript 中的 react 事件类型

发布时间：2023/03/19 浏览次数：477 分类：

本教程演示了如何在 typescript 中为 react 事件添加类型支持。

在 react 中循环遍历对象数组

发布时间：2023/03/18 浏览次数：602 分类：react

在 react 中循环对象数组：使用 map() 方法迭代数组。我们传递给 map() 的函数会为数组中的每个元素调用。该方法返回一个新数组，其中包含传入函数的结果。 export default function app (

获取 react 中元素的类名

发布时间：2023/03/18 浏览次数：340 分类：react

在 react 中使用 event.target 获取元素的类名获取元素的类名：将元素上的 onclick 属性设置为事件处理函数。访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons

如何将 key 属性添加到 react 片段

发布时间：2023/03/18 浏览次数：206 分类：react

使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react

如何在 react 中删除事件监听器

发布时间：2023/03/15 浏览次数：592 分类：react

在 react 中删除事件监听器：在 useeffect 挂钩中添加事件侦听器。从 useeffect 挂钩返回一个函数。当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r

发布时间：2023/03/15 浏览次数：261 分类：react

react 中在 map() 中使用条件：在数组上调用 map() 方法。使用 if 条件，如果条件满足则显式返回。否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =

发布时间：2023/03/15 浏览次数：267 分类：react

在 react 中调用多个 onclick 函数：在元素上设置 onclick 属性。在事件处理函数中调用其他函数。事件处理函数可以根据需要调用尽可能多的其他函数。 export default function app () { const s

在 react 中悬停时显示元素或文本-ag捕鱼王app官网