Estoy tratando de arreglar mi código para mantener el efecto de desplazamiento, si el puntero del mouse está en el submenú. Mi objetivo es hacer que los caracteres rojos y el subrayado se peguen cuando el puntero está dentro del submenú y no mostrarlos si fuera del elemento del menú y del submenú.

Pregunta: ¿Cómo puedo forzar el evento de desplazamiento en el menú principal NEW ARRIVALS, después de que el puntero del mouse abandone menuItem principal y vaya al submenú. ¿Cómo haces eso en JSX? Si no, ¿hay alguna forma de apuntar :: después del pseudo elemento en JSX para que pueda hacer un condicional para representar el efecto de estilo?

Necesito algo a este efecto:

if(mouse.is.in.submenu) { 1. I still see main menu item with red characters and the underline 2. I see the submenu } else { Show normal behavior of onMouseLeave } 

MENÚ

ingrese la descripción de la imagen aquí

CodeSandBox

Jerome Gee

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.

Si SubMenu no es hijo de MainMenu , usaría dos valores para controlar el efecto de SubMenu del menú.

Después de que el cursor entre en uno de los menús principales, establezca hoverIndex en la identificación correspondiente y hoverIndex el hovering a true .

El efecto de hoverIndex solo se muestra cuando hoverIndex es igual a su propio índice y el hoverIndex es verdadero.

 {amp}lt;MainMenu onMouseEnter={()={amp}gt;{ this.setState({ hoverIndex: 0, // the menu index hovering: true }) }} onMouseLeave={()={amp}gt;{ this.setState({ hovering: false }) }} hovering={this.state.hoveringIndex === 0 {amp}amp;{amp}amp; this.state.hovering} /{amp}gt; {amp}lt;MainMenu onMouseEnter={()={amp}gt;{ this.setState({ hoverIndex: 1, // the menu index hovering: true }) }} onMouseLeave={()={amp}gt;{ this.setState({ hovering: false }) }} hovering={this.state.hoveringIndex === 1 {amp}amp;{amp}amp; this.state.hovering} /{amp}gt; // ... 

Cuando el cursor ingresa al submenú, simplemente establezca el hovering en true para indicar que el menú de desplazamiento anterior todavía está en estado de desplazamiento.

 ```javascript {amp}lt;SubMenu onMouseEnter={()={amp}gt;{ this.setState({ hovering: true }) }} onMouseLeave={()={amp}gt;{ this.setState({ hovering: false }) }} {amp}gt; {amp}lt;Link{amp}gt;SOMETHING IS DISPLAYED{amp}lt;/Link{amp}gt; {amp}lt;/SubMenu{amp}gt; 

Hice que el subrayado rojo se pegue arreglando mi código JSX y mis estilos CSS.

La clase anexar condicional reubicada está abierta a la li con la clase de primer nivel

 {amp}lt;li className={`${ this.state.isOpen {amp}amp;{amp}amp; this.state.anchorEl === "arrivals" ? "is-open": "" } first-level`}{amp}gt; 

Estilos CSS agregados y editados

 .is-open .sub-navigation{ display: block } .is-open .navigation__link, .navigation__link:hover { color: #e70033; } .is-open .navigation__link:after, .navigation__link:hover:after { bottom: 0; } 

Solución CodeSandbox

nota: * Basado en mi investigación aquí en stackoverflow, no puedes apuntar directamente a pseudo :: elementos en React usando JSX *, que responde a mi pregunta original si de alguna manera puedo controlar: desplaza el cursor sobre JSX.

Jerome Gee

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.