Si utilizas el editor Elementor, puedes añadir un efecto hover de menú CSS personalizado siguiendo estos pasos:

Abra la página o plantilla:

• Inicie sesión en el panel de control de WordPress.
• Vaya a la página que desea editar con Elementor.

• Edite la cabecera, el pie de página o la plantilla que contiene el menú.

Añade o edita la navegación Elementor:

• Vaya a un elemento de menú existente o añada el elemento "Menú WordPress" a la pestaña de Elementor.

• Haga clic en la pestaña Avanzado del elemento.

• Vaya al menú desplegable CSS personalizado.

Copie los estilos CSS:

• Copie el estilo de menú hover deseado de la biblioteca de nuestra página de inicio.

Añade código CSS:

• Pegue el estilo CSS en el área de texto de la lista desplegable CSS personalizado.

Editar color:

• Algunos estilos de menú utilizan los colores de "puntero" predeterminados de Elementor.
• Vaya a la pestaña Estilo del menú.
• Haga clic en Pasar por encima y, a continuación, edite el Color en el Selector de color.

• Opcional: Para anular los estilos de color predeterminados de Elementor, termine con ";" antes del carácterImportante.

Guardar y publicar

• Pulse "actualización"o"Correo electrónico:" para aplicar los cambios.

Otros pueden utilizar los otros 4 tipos deconversiones::

• MatrizAplica transformaciones 2D complejas mediante matrices de transformación.
• Traducción: Mueve la posición de un elemento en dos o tres dimensiones.
• GireGira el elemento alrededor del punto especificado.
• InclinaciónGira un elemento para inclinarlo horizontal o verticalmente.

Código de ejemplo:

/* Ejemplo de efecto hover */
selector:hover {
  color: #ffffff !important; color de fondo: #000000 !important; }
  background-color: #000000 !important; transform: translateY(-10px); /* añadir efecto de traslación */ hover
  transform: translateY(-10px); /* añadir efecto de traslación */
}

/* Ejemplo de efecto de rotación */
selector:hover {
  transform: rotate(10deg); /* Añadir efecto de rotación */
}

/* Ejemplo de inclinación */
selector:hover {
  transform: skewX(10deg); /* Añadir inclinación horizontal */
}

/* Ejemplo de efecto matriz */
selector:hover {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0); /* añadir efecto matriz */
}

Resumen:

Si utilizas el editor Elementor, puedes mejorar el efecto hover del menú añadiendo CSS personalizado. Navega por Elementor añadiendo o editando en la pestaña Elementor, ve a la pestaña Avanzado y navega hasta el menú desplegable CSS personalizado. Ajusta el color del efecto hover editando la opción de color en la pestaña Estilos. La animación hover del menú también se puede personalizar aún más utilizando efectos como Matrix, Translate, Rotate y Skew.