将鼠标悬停在父元素上时编写程序以将子元素添加到对应的父元素

Question

当鼠标悬停在元素上时，我想编写一个反应 jsx 的程序假设<li>

<li><a>Pakistan cricket won the match</a></li>
<li><a>We should exercise every day</a></li>

并将这些子元素添加到对应的<li>元素中

<img src='...' />
<p>details  of header</p>
<button>add to favorite</button>

当鼠标从<li>元素中移出时，应删除相应的子元素

注意：当鼠标悬停时，子元素应该可以使用

Answer 1

所以基本上你需要在父元素上有 onMouseEnter 和 onMouseLeave 并制作一个 state 来保存是否显示附加数据这里是一个简单的例子

 import "./styles.css"; import {useState} from 'react' function Children(){ return ( <> <img src='https://picsum.photos/200/300' /> <p>details of header</p> <button>add to favorite</button> </> ) } function Parent() { const [isMouseOver,setIsMouseOver] = useState(false) const handleEnter = () => { setIsMouseOver(true) } const handleLeave = () => { setIsMouseOver(false) } return( <div onMouseEnter={handleEnter} onMouseLeave={handleLeave}> <h1>Hover me</h1> {isMouseOver? <> <Children /> </>: null } </div> ) } export default function App() { return ( <div className="App"> <Parent /> </div> ); }

同样，您可以将父组件更改为您的 li 以及子组件应该可见的其他数据。

请注意，在此示例中 h1 是一个块组件，因此您应该保留整个块以使数据消失

演示地址： https://codesandbox.io/s/silly-dewdney-d8btf?file=/src/App.js:0-738

Answer 2

您可以添加一些 class 并在其各自的 CSS 中，处理鼠标悬停（ :hover ）。

应用程序.js

import "./styles.css";

function ListItem({i})
{
  return (
    <li className="listitem">
      <a href="stackoverflow.com">Link{i}</a>
      <img className="hideele" src="" alt={i} />
      <p className="hideele">Para{i}</p>
      <button className="hideele">Button{i}</button>
    </li>
  );
}

export default function App() {
  return (
    <div className="App">
      <ul>
        <ListItem i={1} />
        <ListItem i={2} />
        <ListItem i={3} />
      </ul>
    </div>
  );
}

索引.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

CSS：

.App {
  font-family: sans-serif;
}
.listitem:hover .hideele {
  display: block;
}
.hideele {
  display: none;
}