O que são cursores em CSS?
Todos os dias já usamos cursores customizados. Essa interação é possível usando cursores modificados, como quando você passa o mouse sobre os botões, o cursor do ponteiro se transforma em uma mão ou quando você passa o mouse sobre o texto e o cursor se transforma em um cursor de texto.
Os cursores, no entanto, também podem ser usados para oferecer aos nossos usuários diversas oportunidades criativas adicionais.
Devemos estar cientes de que o CSS já possui cursores padrão para várias ações realizadas com frequência antes de começarmos a desenvolver nossos cursores personalizados.
Esses cursores fornecem opções de ação no local exato sobre o qual você está passando o mouse. Os exemplos incluem cursores que indicam que você deve clicar em links, arrastar e soltar elementos, aumentar e diminuir o zoom em objetos e muito mais.
Use a propriedade CSS cursor para descrever o tipo de cursor que você deseja.
Propriedade do Cursor CSS
Podemos especificar o tipo de cursor que deve ser mostrado ao usuário usando a propriedade CSS cursor.
Usar fotos como botões de envio em formulários é uma aplicação útil desse recurso. Por padrão, uma mão aparece em vez de um ponteiro quando um cursor está acima de um link. No entanto, o botão de envio de um formulário não faz com que ele mude de formulário. Isso serve como uma dica visual de que a imagem pode ser clicada sempre que alguém passa o mouse sobre uma imagem que é um botão de envio.
Esta propriedade é especificada por zero ou mais valores separados por vírgulas, seguidos por um valor de palavra-chave conforme necessário, e cada um se referirá ao arquivo de imagem.
Sintaxe
cursor: value;
Valores de propriedade
| Auto: | A configuração padrão para este atributo é posicionar o cursor.
| Alias: | Este atributo é usado para mostrar o indicador relacionado à criação do cursor.
| Rolagem total: | O cursor neste atributo indica rolagem.
| Célula: | O cursor nesta propriedade indica que uma célula ou grupo de células está atualmente escolhido.
| Menu contextual: | O cursor neste atributo mostra a presença de um menu de contexto.
| Col-redimensionar: | Quando o cursor estiver acima de uma coluna nesta propriedade, ele poderá ser redimensionado horizontalmente.
| Cópia de: | O cursor nesta propriedade indica que algo deve ser copiado.
| Mira: | O cursor aparece como uma cruz neste atributo.
| Padrão: | O cursor padrão.
| E-redimensionar: | O cursor neste atributo indica que a borda direita de uma caixa deve ser movida.
| Redimensionar: | O cursor neste atributo representa um cursor de redimensionamento bidirecional.
| Ajuda: | Nesta propriedade o cursor mostra que a assistência está acessível.
| Mover: | O ponteiro nesta propriedade implica que algo deve ser movido
| . n-redimensionar: | Ao usar a propriedade n-resize, o ponteiro mostra que o limite superior de uma caixa deve ser deslocado.
| O que redimensionar: | Com esta propriedade, o cursor mostra que a borda de uma caixa deve ser deslocada para a direita e para cima.
| Novo redimensionamento: | O cursor de redimensionamento bidirecional é indicado por este atributo.
| Redimensionamento Ns: | Um cursor de redimensionamento bidirecional é indicado pelo atributo ns-resize.
| Nw-redimensionar: | O cursor neste atributo mostra que as bordas superior e inferior de uma caixa devem ser movidas para cima e para a esquerda.
| Redimensionamento do nariz: | O cursor de redimensionamento bidirecional é indicado por este atributo.
| Não solte: | O cursor neste atributo indica que o objeto puxado não pode ser despejado neste local.
| Nenhum: | Um cursor não é exibido para o elemento de acordo com este atributo.
| Não permitido: | O cursor nesta propriedade indica que a ação solicitada não será realizada.
| Ponteiro: | O cursor nesta propriedade serve como ponteiro e exibe o progresso do link.
| Progresso: | O cursor neste atributo mostra que o programa está ativo.
| Redimensionamento de linha: | O cursor mostra que este recurso permite o redimensionamento de linhas verticais.
| Redimensionar S: | Ao utilizar esta propriedade, o ponteiro mostra que o limite inferior de uma caixa deve ser rebaixado.
| Redimensionar automaticamente: | O cursor neste atributo indica que a borda de uma caixa deve ser deslocada para a direita e para baixo.
| Redimensionar sw: | O cursor neste atributo indica que as bordas esquerda e inferior de uma caixa devem ser movidas.
| Texto: | O cursor neste atributo indica o texto que pode ser escolhido.
| URL: | Esta propriedade contém uma lista de URLs de cursores personalizados separados por vírgulas e um cursor genérico no final da lista.
| Texto vertical: | O cursor neste atributo mostra possíveis seleções de texto vertical.
| Redimensionar W: | Ao utilizar esta propriedade, o ponteiro mostra que a borda esquerda de uma caixa deve ser movida.
Exemplo
Este exemplo mostra como utilizar a propriedade cursor. O programa está ocupado porque o valor da propriedade cursor está definido para aguardar.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Saída
Podemos especificar o tipo de cursor que deve ser mostrado ao usuário usando a propriedade CSS cursor. Usar fotos como botões de envio em formulários é uma aplicação útil desse recurso. Por padrão, uma mão aparece em vez de um ponteiro quando um cursor está acima de um link.
