Se estiver a utilizar o editor Elementor, pode adicionar um efeito de foco de menu CSS personalizado seguindo estes passos:

Abra a página ou o modelo:

• Inicie sessão no painel de controlo do WordPress.
• Navegue até à página que precisa de ser editada com o Elementor.

• Edite o cabeçalho, o rodapé ou o modelo que contém o menu.

Adicione ou edite a navegação Elementor:

• Navegue até um elemento de menu existente ou adicione o elemento "WordPress Menu" ao separador Elementor.

• Clique no separador Avançadas no elemento.

• Navegue até o menu suspenso CSS personalizado.

Copie os estilos CSS:

• Copie o estilo do menu desejado da biblioteca da nossa página inicial.

Adicione código CSS:

• Cole o estilo CSS na área de texto da lista suspensa CSS personalizado.

Edite a cor:

• Alguns estilos de menu utilizam as cores de "ponteiro" predefinidas do Elementor.
• Navegue até ao separador Estilo do menu.
• Clique em Hover e, em seguida, edite a cor no seletor de cores.

• Opcional: Para substituir os estilos de cor predefinidos do Elementor, termine o ";" antes do!important.

Guardar e publicar

• Clique em "atualização"ou"posto" para aplicar as alterações.

Outros podem utilizar os outros 4 tipos deconversões::

• MatrizAplicar transformações 2D complexas através de matrizes de transformação.
• TraduçãoDeslocação: Desloque a posição de um elemento em duas ou três dimensões.
• RodarRotação: Rode o elemento em torno do ponto especificado.
• InclinaçãoTorcer um elemento de modo a que fique inclinado na horizontal ou na vertical.

Código de exemplo:

/* Exemplo de efeito Hover */
seletor:hover {
  colour: #ffffff !important; background-color: #000000 !important; }
  background-color: #000000 !important; transform: translateY(-10px); /* adicionar efeito de translação */ hover
  transform: translateY(-10px); /* Adicionar efeito de translação */
}

/* Exemplo de efeito de rotação */
seletor:hover {
  transform: rotate(10deg); /* Adicionar efeito de rotação */
}

/* Exemplo de inclinação */
seletor:hover {
  transform: skewX(10deg); /* Adicione inclinação horizontal */
}

/* Exemplo de efeito de matriz */
seletor:hover {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0); /* adicionar efeito de matriz */
}

Resumo:

Se estiver a utilizar o editor Elementor, pode melhorar o efeito de pairar do menu adicionando CSS personalizadas. Navegue no Elementor adicionando ou editando no separador Elementor, aceda ao separador Avançadas e navegue até ao menu pendente CSS personalizadas. Ajuste a cor do efeito de foco editando a opção de cor no separador Styles (Estilos). A animação do menu ao passar o rato pode ser ainda mais personalizada utilizando efeitos como Matrix, Translate, Rotate e Skew.