Como alterar o ponteiro do mouse em CSS

So ändern Sie den Mauszeiger in CSS
⏱️ 3 min read

As alterações do cursor podem não ser a propriedade mais popular do mundo, mas ainda é uma ferramenta útil para desenvolvedores. Embora os navegadores mudem automaticamente os cursores de certos objetos, como links e alguns itens arrastáveis, os desenvolvedores podem obter melhores resultados especificando o cursor desejado especificamente.

Alterar o ponto do mouse em CSS

A aparência do cursor é controlada pelo propriedade CSS do cursor. Esta propriedade controla o tipo de cursor renderizado quando o usuário passa o mouse sobre o objeto. Por exemplo, passar o mouse sobre o objeto associado à classe abaixo produziria uma seta de arrasto de quatro direcional:

Ao passar o mouse sobre o objeto, o usuário veria um cursor como o mostrado abaixo.

Opções de cursor padrão em CSS

Há uma grande variedade de opções de cursor que você pode definir para o uso do cursor. Observe que o “N”, “S”, “W” e “E” que você vê na lista referem-se às direções cardeais de norte, sul, leste e oeste. Por exemplo, cursor: e-resize; mostra uma alça de redimensionamento com uma seta no lado “leste” ou direito.

Chris Coyier, o mago por trás CSS-Tricks.com, criado este doodle para ajudar a mostrar as várias opções de cursor em CSS.

Usando imagens como cursores

Como muitas propriedades CSS, a propriedade cursor também pode receber atributos por meio de especificações de URL. Por exemplo, a classe abaixo usaria a imagem associada para o cursor.

O auto depois especifica um cursor de fallback. O atributo auto mostrará qualquer cursor que o navegador normalmente usaria para o objeto atual sob o cursor. Você também pode especificar imagens adicionais com uma lista separada por vírgulas ou especificar qualquer um dos cursores para funcionar como seu cursor de fallback.

Animação de qualquer tipo, seja em GIF, SVG ou PNG, não é compatível com os navegadores. Mas PNGs transparentes funcionam em todos os navegadores da web populares no mercado hoje. Os SVGs não são tão confiáveis ​​no Firefox, mas funcionam bem em outros navegadores.

Por padrão, o “ponto de acesso” do cursor será definido para o canto superior esquerdo da imagem. Para indicar um “ponto quente” diferente, especifique um par de coordenadas (X, Y) em sua chamada de cursor. O exemplo abaixo definirá o ponto de acesso como (3,3), usando o canto superior esquerdo como (0,0).

Conclusão: Usando Esses Atributos

Se estiver desenvolvendo um site, você pode adicionar essas propriedades CSS a qualquer objeto em seu site para alterar o cursor que o usuário vê ao passar o mouse sobre o objeto. Se você for mais aventureiro, também pode usar uma extensão do navegador como Stylus, TamperMonkey, ou GreaseMonkey para executar CSS arbitrário no topo de um site. Dessa forma, você pode mostrar seu próprio cursor personalizado quando e onde quiser.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x