Normalmente, setas gráficas em sites são usadas para organizar a navegação. Ao clicar nesse ponteiro, você vai para outra página ou para outra seção da página atual. Às vezes, algumas ações estão vinculadas a eles - destacando o conteúdo do campo da tag, iniciando um script JavaScript, etc. Para enfatizar que esta seta é um elemento ativo, use o efeito "realçar", ou seja, mudanças na aparência ao passar o mouse.
Necessário
Conhecimento básico de linguagens HTML e CSS
Instruções
Passo 1
Determine qual mecanismo para implementar o realce de seta é melhor para você. Existem vários deles, dois simples são fornecidos nas etapas subsequentes desta instrução. Ambos usam a pseudoclasse CSS hover. Quando o cursor do mouse está sobre um elemento gráfico (seta), o estilo descrito nesta pseudoclasse é aplicado a ele e, no restante do tempo, esse estilo não fica ativo. Para ambas as opções descritas abaixo, você pode usar o mesmo HTML código, mas com descrições de estilo diferentes. O código da seta no código-fonte da página pode ser escrito da seguinte forma: O atributo id especifica o identificador do link (arrowA), pelo qual o navegador determinará qual das descrições de estilo deve ser aplicada a ele.
Passo 2
A primeira opção exigirá que você prepare duas imagens de flechas - com e sem luz de fundo. Salve-os em arquivos com nomes como arrON.
a # arrowA, a # arrowA: visitado {
display: bloco;
altura: 30px;
largura: 100px;
plano de fundo: url (arrOFF.gif) sem repetição;
fronteira: 0;
}
a # arrowA: hover {
plano de fundo: url (arrON.gif) sem repetição;
fronteira: 0;
}
O primeiro bloco contém as dimensões da seta (altura: 30px; largura: 100px;) - substitua-as pelas dimensões das imagens de seta preparadas.
etapa 3
A segunda opção permite que você continue com apenas um arquivo de imagem. Você precisa colocar as duas imagens da seta nele - realçadas e inativas. Você pode colocá-los lado a lado, um acima do outro. No código de amostra, assumiremos que a seta destacada é colocada sob a inativa e o arquivo é nomeado arr.
a # arrowA, a # arrowA: visitado {
display: bloco;
largura: 100px;
altura: 30px;
plano de fundo: url (arr.gif) sem repetição;
fronteira: 0;
}
a # arrowA: hover {
background: url (arr.gif) sem repetição 31px;
fronteira: 0;
}
Não se esqueça de redimensionar aqui também.
