0
153
Vistaspor qué el estilo en línea y: el desplazamiento no tendrá ningún efecto en reaccionar js
Estoy tratando de agregar un hover effect de desplazamiento a un span element como se muestra a continuación.
- El efecto de desplazamiento no funciona cuando se agrega dentro del accesorio de estilo.
- Pero, si está escrito en un archivo css separado, funcionará
Solo quiero saber, ¿Por qué es así?
https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js
Aplicación.js
import "./styles.css"; export default function App() { return ( <div className="App"> <span style={{ fontSize: "4em", color: "blue", "&:hover": { color: "green" } }} > Element </span> <div></div> <span className="ele">Element 2</span> </div> ); }estilos.css
.App { font-family: sans-serif; text-align: center; } .ele { font-size: 4em; color: blue; } .ele:hover { font-size: 6em; color: green; }
·
Santiago Gelvez
2 Respuestas
Responde la pregunta0
Eso porque no podemos especificar los estilos en línea para pseudo elementos y pseudo clases. Puedes usarlo con el,
- Interno: mediante el uso de un elemento
<style>en la sección.
Un CSS interno se define en la sección de una página HTML, dentro de un elemento. ejemplo
- Externo: mediante el uso de un elemento para vincular a un archivo CSS externo. Para utilizar una hoja de estilo externa, agregue un vínculo en la sección de cada página HTML. ejemplo
·
Santiago Gelvez
Denunciar
0
Debe usar el complemento JSS que admite el estilo en línea de pseudo-selectores, o debe usar Material UI, que también es compatible con este complemento.
·
Santiago Gelvez
Denunciar
Responde la pregunta