É possível trocar a cor do cursor do mouse via CSS? – css cursor

Pergunta:


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.

Autor da pergunta Luiz Vieira

Leandro Amorim

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>

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. 🙂

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’.

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.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *