Quiero escribir un programa en reaccionar jsx cuando pase el mouse sobre un elemento supongamos <li>
<li><a>Pakistan cricket won the match</a></li> <li><a>We should exercise every day</a></li> y agregue estos elementos secundarios al elemento <li> correspondiente
<img src='...' /> <p>details of header</p> <button>add to favorite</button> Cuando se aleja el mouse de un elemento <li> , los elementos secundarios correspondientes deben eliminarse
Nota: al pasar el mouse por encima, los elementos de los niños deberían ser viables
Entonces, básicamente, debe tener onMouseEnter y onMouseLeave en los elementos principales y crear un estado que retenga si mostrar los datos adicionales aquí es un ejemplo simple
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> ); }De manera similar, cambiaría el componente principal a su li y los datos adicionales que deberían ser visibles para el componente secundario.
Tenga en cuenta que en este ejemplo, h1 es un componente de bloque, por lo que debe dejar el bloque completo para que desaparezcan los datos.
demostración en: https://codesandbox.io/s/silly-dewdney-d8btf?file=/src/App.js:0-738
Puede agregar alguna clase y en su respectivo CSS, manejar el mouseover ( :hover ).
Aplicación.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> ); }Índice.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; }