Amigos que navegam com frequência na Internet já notaram que o mouse em alguns sites não tem o formato de uma seta diagonal regular para cima, mas um formato de cruz, ou uma seta para a esquerda, ou um ponto de interrogação, etc. Quando você quiser que o mouse exiba diferentes formas em diferentes locais da página da web para refletir diferentes áreas funcionais, quando quiser que seu site reflita um estilo único, considere trabalhar no estilo do mouse; Na verdade, os estilos de mouse têm uma ampla variedade de usos, então como você pode implementar diferentes estilos de mouse. Inicie o Dreamweaver, abra a página da Web onde deseja aplicar o estilo de mouse, selecione o menu suspenso Texto na janela principal e selecione o menu suspenso Texto na janela principal. em seguida, selecione Novo no submenu Estilo CSS. O comando Estilo cria uma nova folha de estilo. (Observação: se já existir uma folha de estilos em sua página da web, você pode selecionar Estilos CSS Editar folha de estilos para editar a folha de estilos.) A caixa de diálogo Novo estilo aparecerá. O item Tipo possui três botões de opção: Criar estilo personalizado, Redefinir tag HTML e Usar seletor CSS. Entre eles, Make Custom Style é um estilo personalizado, e o nome do estilo começa com um ponto. Usar seletor CSS é usar o seletor CSS, que contém quatro estilos de hiperlink
a:active/a:hover/a:link/a:visited; ; Redefine HTML Tag é um estilo que define tags do sistema HTML, como abodybr e assim por diante. Suponha que definimos apenas o estilo do mouse para os hiperlinks nesta página. Aqui, selecione a tag a na opção Redefinir tag HTML. Selecione Este documento apenas para o item Definir abaixo. Clique no botão OK. A caixa de diálogo Definição de estilo para aparece e insere a configuração de estilo do hiperlink. A categoria à esquerda é a categoria de estilo. Não há explicação para outros itens aqui. Escolhemos o item Extensões. Você pode ver o item Cursor no Efeito Visual à direita, que é o item chave para definir o estilo do mouse. Clique no menu suspenso à direita, selecione o estilo de mouse necessário e clique no botão OK. Vamos falar sobre o significado geral de cada estilo.
mão: é um formato de mão familiar.
mira: É em formato de cruz, que é o estilo usado na página inicial da Tartaruga.
texto: É o estilo quando o mouse é movido sobre o texto.
esperar: é o efeito da espera.
padrão: é o efeito padrão.
ajuda: é o estilo do mouse com ponto de interrogação.
e-resize: é a seta para a direita.
ne-resize: é a seta apontando para cima, para a direita.
n-resize: é uma seta para cima.
nw-resize: é a seta apontando para cima, para a esquerda.
w-resize: É uma seta passando para a esquerda.
sw-resize: é a seta apontando para baixo, para a esquerda.
s-resize: é uma seta para baixo.
se-resize: é a seta apontando para baixo, para a direita.
auto: É o efeito automático do sistema.
Claro, você também pode aplicar o estilo a outras tags conforme necessário ou simplesmente aplicá-lo a um determinado parágrafo de texto. Se o leitor estiver familiarizado com o código CSS, pode ser mais conveniente escrever o código diretamente à mão. Em particular, se você quiser usar estilos de mouse diferentes para locais diferentes ou usar estilos de mouse diferentes para guias diferentes. Basta escrever o estilo diretamente em uma tag específica.
O método é: <tag style=cursor:mouse_style>. Onde tag é o nome da tag, mouse_style é o estilo do mouse, como mão/mira/texto/espera, etc.
Vamos dar um exemplo específico para aprofundar a compreensão de todos sobre as configurações de estilo do mouse.
<span style=cursor:hand> mão: é um formato de mão familiar. < /span>
< span style=cursor:crosshair>mira: É uma mira, que é o estilo usado na página inicial da Pequena Tartaruga. < /span>
< span style=cursor:text>text: é o estilo no qual o mouse normalmente é movido sobre o texto. < /span>
< span style=cursor:wait>wait: é o efeito da espera. < /span>
< span style=cursor:default>default: é o efeito padrão. < /span>
< span style=cursor:help>help: é um estilo de mouse com um ponto de interrogação. < /span>
< span style=cursor:e-resize>e-resize: é uma seta para a direita. < /span>
< span style=cursor:ne-resize>ne-resize: é uma seta apontando para cima, para a direita. < /span>
< span style=cursor:n-resize>n-resize: é uma seta para cima. < /span>
< span style=cursor:nw-resize>nw-resize: é uma seta apontando para cima, para a esquerda. < /span>
< span style=cursor:w-resize>w-resize: É uma seta passada para a esquerda. < /span>
< span style=cursor:sw-resize>sw-resize: é uma seta apontando para baixo, para a esquerda. < /span>
< span style=cursor:s-resize>s-resize: é uma seta para baixo. < /span>
< span style=cursor:se-resize>se-resize: é uma seta apontando para baixo, para a direita. < /span>
< span style=cursor:auto>auto: é o efeito automático do sistema. </span>
Copie o código acima para sua página da web e pressione F12 para visualizar. Passe o mouse sobre o texto correspondente e veja o que acontece com o mouse. Ele aparece no estilo correspondente?