11

Eu sei que é possível trocar o estilo (tipo) do cursor do mouse via propriedade cursor no CSS. Mas, alguém sabe se é possível alterar a cor do cursor?

Em uma aplicação eu gostaria de ter o pointer cursor (a mãozinha apontando pra cima) em diferentes cores, dependendo do objeto sobre o qual o mouse for posicionado.

Já vi soluções em que o cursor é simplesmente escondido e utiliza-se Javascript para mover uma imagem representando o cursor desejado. Mas queria saber se há alguma solução mais trivial com as versões mais novas do CSS.

3
  • Por questões de usabilidade, é melhor não trocar o cursor do mouse. Deixa o cursor nativo do sistema operacional.
    – user622
    Commented 5/02/2014 às 3:34
  • @GabrielSantos Apesar de você ter razão para alguns cenários, a aplicação que eu estou desenvolvendo é um jogo em que a seleção de cores faz parte da mecânica. Utilizar o mouse para indicar a cor selecionada me pareceu uma estratégia adequada (nos objetos com que o jogador interage - incluindo os botões de seleção de cor que mudam o mouse e têm indicação visual mutuamente exclusiva de estado "pressionado" - há diferentes símbolos para auxiliar pessoas com algum grau de daltonismo). Commented 5/02/2014 às 10:58
  • 1
    @Gabriel Santos, sua observação seria bacana caso o Luiz Vieira estivesse em dúvida ou demonstrasse uma preocupação quanto a usabilidade, do contrário, instruí-lo a não fazer o que ele deseja não agrega nada para uma solução do problema.
    – Joao Paulo
    Commented 11/03/2014 às 19:21

4 Respostas 4

10

A cor não é possível.

Porém você pode trocar o ponteiro do mouse com o CSS:

.novoCursos {
   cursor: url(ponteiroVermelho.gif), auto;
}

O código html ficaria assim:

<div class='novoCursos'>Ola, coloque o mouse em cima dessa frase para ver o cursor alterar.</div>
1
  • 2
    Só pra constar, parece que no IE só funciona se o ponteiro utilizado estiver no formato .cur (arquivo de cursor). Commented 1/02/2014 às 22:24
10

Só pra adicionar uma outra informação bacana que eu encontrei (e um exemplo funcional!), eu resolvi criar esta resposta. :)

A partir dessa thread do SO(en), eu aprendi que também é possível embutir o cursor diretamente no CSS via a codificação dos dados da imagem utilizada em base64. Com o auxílio de ferramentas online como essa ou essa, uma imagem de cursor submetida pode ser facilmente convertida em uma string de dados codificados.

Eu usei as seguintes imagens em formato PNG, criadas a partir deste original de utilização livre:

inserir a descrição da imagem aquiinserir a descrição da imagem aquiinserir a descrição da imagem aquiinserir a descrição da imagem aqui

Codifiquei cada uma usando uma das ferramentas citadas, e utilizei a seguinte sintaxe para definir os cursores:

cursor: url(data:image/png;base64,iVBORw0KG...), auto;

Este exemplo no JSFiddle contém os dados codificados de cada uma das imagens de cursor acima e permite testar o funcionamento dessa sugestão.

A principal vantagem que eu imagino dessa utilização é justamente reduzir o número de requisições de recursos ao servidor. Procurando mais a esse respeito eu achei essa outra thread no SO(en) que tem uma resposta muito bacana a respeito dos cuidados/limitações dessa abordagem. Traduzindo livremente abaixo:

É uma boa prática comumente utilizada apenas para pequenas imagens em CSS que serão utilizadas juntas (tal como sprites), quando a compatibilidade com o IE não importa muito e, principalmente, quando a economia nas requisições é mais importante do que a "cacheabilidade" (imagens nesse formato não são mantidas em cache pelo navegador).

Tem um número importante de pontos-negativos:

  • Não funciona de forma alguma no IE6 e no IE7.
  • Funciona para recursos de até 32k de tamanho no IE8. Esse é o limite que se aplica à codificação à representação após a codificação em base64, ou seja, não se permite strings maiores do que 32.768 caracteres.
  • Economiza na requisição, mas carrega a página HTML! E impede o cache das imagens. Elas são carregadas toda vez que a página ou CSS contendo a string codificada é carregada.
  • A codificação em base64 aumenta o tamanho das imagens em 33%.
  • Se for utilizado um recurso que compactado com gzip, isso causará um custo consideravel no servidor! Imagens tradicionalmente utilizam muita CPU para serem comprimidas, com pouca compressão no tamanho.

EDIT: Eu fiz alguns testes aqui (windows 8.1 64bits) com o JSFiddle de exemplo. Funcionou perfeitamente no Chrome (32.0) e no Firefox (26.0), mas não funcinou no IE11.

EDIT2:

A solução da resposta do @LeandroAmorim não funciona no IE11 mesmo se for dada uma URL diretamente para um arquivo png ou gif. Depois de muito procurar, notei que pra isso funcionar no IE a imagem utilizada deve estar no formato .cur ou .ani (essa indicação de necessidade de usar o formato "cursor" para o IE está na especificação do CSS 2.1 referida na resposta do @Kazzkiq).

Como o formato de cursor é aceito pelos demais navegadores, pra funcionar de forma geral (cross-browser) basta utilizar sempre esse formato ao invés de png ou gif.

É bastante fácil obter os arquivos no formato .cur:

  1. Via GIMP (por exemplo), salve as imagens no formato .ico;
  2. Então, utilize esse script Python para converter os arquivos .ico em arquivos .cur;
  3. Utilize no CSS os arquivos .cur da forma sugerida pelo @LeandroAmorim:
cursor: url(red_pointer.cur), auto;

Eu só não consegui utilizar o cursor na abordagem de incluir os dados codificados em base64. Provavelmente porque não sei como identificar o tipo do formato dos dados (data:image/x-icon e data:image/png não funcionam...). Se alguém souber como fazer, agradeceria a indicação. :)

4

Infelizmente, o cursor é uma propriedade do próprio OS (Windows, Linux, Apple). Por meio do CSS, consegue modificar o tipo de cursor, mas não a cor dele, pois a cor é definido nas configurações do OS.

Por isso que as soluções que você viu fez exatamente isso - esconder o cursor, e replicá-la de uma forma controlável pela JavaScript e/ou CSS.

Atualização

Como foi dito em algumas outras respostas, é possível usar seu próprio cursor, utilizando o atributo url, e usando um .cur ou .gif.

cursor:url('cursors/cursor.cur');

Algumas informações (em inglês) podem ser encontradas aqui, também explicando de alguns métodos de garantir 'cross-browser compatability'.

2

Mudar somente a cor não é possível, contudo, a partir do CSS 2.1 é possível subistituir o cursor por um ícone:

body{ /*pode qualquer seletor válido*/
    cursor:url(cursor.gif), auto;
}

A opção auto é utilizada caso a imagem passada no parâmetro url apresente algum erro e não seja carregada.

2
  • Na verdade, não é possível mudar a cor do cursor, que nem a pergunta pede, mas sim mudar a imagem do cursos, como a sua solução propõe. Commented 1/02/2014 às 22:23
  • Você está certo @FelipeAvelar. Atualizei a resposta.
    – Kazzkiq
    Commented 11/03/2014 às 19:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .