5

O cursor: pointer é uma propriedade CSS que define o cursor do mouse como um "ponteiro" sobre determinado elemento.

Até aqui tudo tranquilo, vale ressaltar que no JavaScript eu também posso adicionar um cursor do mouse sobre determinado evento.

document.querySelector('.element').addEventListener('mouseover',() => {
  document.querySelector('.element').style.cursor = 'pointer';
});
<p class="element">Just an example</p>

Porém, apesar de entender a ideia fico com algumas dúvidas:

  • A propriedade cursor: pointer não simula um comportamento para determinada situação? Se sim, por que ela é definida via CSS e não somente por JavaScript?
  • O que o JavaScript realmente faz ao adicionar esse cursor? Adiciona um estilo no elemento com CSS?
  • Em relação a outras propriedades CSS adicionadas sobre um elemento, ele "toma" a mesma atitude que a do cursor?

2 Respostas 2

6

A propriedade cursor:pointer não simula um comportamento para determinada situação? Se sim, por que ela é definida via CSS e não somente por JavaScript?

O JS não simula o comportamento do elemento, ele simula o comportamento do cursor do mouse. Repare que o HTML tem vários elementos que por convenção se utilizam do cursor do mouse para dar um feedback visual para o usuário. Por exemplo a tag <a> usa o cursor:pointer e a tag <input> usa o cursor:text. Colocar um cursor:text em uma <div> não vai mudar o comportamento da <div> apenas vai confundir o usuário, pois ele pode entender que é possível digitar um texto na div...

Exitem uma série de tipos de cursor. A própria MicroSoft já abordou isso nesse artigo: https://docs.microsoft.com/pt-br/windows/desktop/uxguide/inter-mouse

inserir a descrição da imagem aqui

Objetos de interface de usuário (UI) bem projetados são considerados como affordance, que são propriedades visuais e comportamentais de um objeto que sugere como ele é usado. O ponteiro funciona como um proxy para a mão, permitindo que os usuários interajam com objetos de tela de maneira muito parecida com objetos físicos.

Isso quer dizer que o cursor é uma extensão da mão do usuário, e ele leva em consideração o tipo do ponteiro para saber a forma que ele vai interagir com o elemento, se é clicando, arrastando, digitando, etc...

Outro ponto é com relação a acessibilidade. As tags <button>, <label> e <input> por exemplo são interpretadas de uma forma pelos leitores de tela, e o "tipo" de cursor pouco vai importar para eles. O principal nesse caso é se preocupar com a semântica do código, o uso correto dos atributos roles e dos aria vc pode ler sobre eles aqui: https://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/

Observação: Clicar com o botão direito do mouse, clicar duas vezes (double click) e clicar com os modificadores de tecla Shift ou Ctrl são três interações do mouse que não são intuitivas , porque não têm contrapartes no mundo real.


O que o JavaScript realmente faz ao adicionar esse cursor? Adiciona um estilo no elemento com CSS?

Sim ele adiciona o estilo na hora, porém trocar cursor não é fazer um :hover. Repare que seu código troca o cursor colocando um estilo cursor:pointer diretamente na tag (tipo um style inline), mas quando vc tira o cursor de cima do elemento ele continua com o cursor:pointer setado na tag. O que o seu script faz não é propriamente um :hover e um leitor de tela não entenderia que foi feito um :hover e não "veria" que o cursou foi alterado...

inserir a descrição da imagem aqui

O :hover sempre vai existir, assim que o DOM e CSSOM for construído todos os elementos já terão seu estilo de :hover declarado pelo CSS, já com o JS vc só vai aplicar o estilo quando o evento acontecer no elemento, algo que pode até depender do hardware ou da conexão do usuário para ter uma boa performance. Como vc viu na imagem o estilo do cursor não existe ainda até que o usuário interaja com o elemento. Já com CSS o estilo já estará "programado", é algo como o "will change", onde o browser já sabe que aquele elemento vai sofrem uma interação ou animação. https://developer.mozilla.org/pt-BR/docs/Web/CSS/will-change


Em relação a outras propriedades CSS adicionadas sobre um elemento, ele "toma" a mesma atitude que a do cursor?

Acredito que sim, mas não sei dizer exatamente como o browser e os leitores de tela entendem o JS, pois na maioria dos casos são eventos que só são disparados quando o usuário faz alguma interação. Alguns dos eventos não executam quando a página carrega, mas só quando tem alguma ação por parte do usuário. O que eu posso dizer é que o tipo do cursor não muda o tipo do elemento.

Para leitura:

2
  • Simplesmente sensacional! Tudo o que precisava saber para entender melhor! Commented 20/09/2018 às 12:30
  • @JoãoPedroSchmitz que bom que te deu uma luz. Não deixe der ler os links que citei, nem que seja uma leitura dinâmica rss
    – hugocsl
    Commented 20/09/2018 às 12:32
2

Vamos por partes.

A propriedade cursor: pointer não simula um comportamento para determinada situação? Se sim, por que ela é definida via CSS e não somente por JavaScript?

A propriedade cursor do elemento simplesmente altera a forma como o cursor do mouse é visualizado ao ser colocado acima do elemento em questão, por isso é definido em CSS que é responsável por definir o estilo dos elementos definidos em HTML existem pseudo-classes em CSS que nos fornecem "ganchos" para determinar a ocorrência de determinado evento no elemento por exemplo:

#dv {
  width: 100px;
  height: 100px;
  background-color: red;
}

#dv:hover {
  background-color: green;
}
<div id="dv"></div>

Como pode ver no exemplo acima quando o mouse está sobre o elemento é aplicado sobre o mesmo as propriedades definidos para o evento em questão, isso ocorre porque determinado condição(no caso, que o mouse esteja sobre o elemento) foi cumprida. O problema é que hávera casos em que você irá querer criar suas próprias condições dependentes de valores dinâmicos por exemplo, um script que recebe as notas de um determinado aluno e calcula sua média, e dependendo do resultado, o mesmo veja um botão de redirecionamento isso irá depender de valores externos, aí entra o Javascript.

O que o JavaScript realmente faz ao adicionar esse cursor? Adiciona um estilo no elemento com CSS?

Faz exatamente o mesmo que o CSS exceto que com Javascript é possível definir uma determinada lógica antes de aplicar esse estilo no elemento tudo de forma dinâmica.

Em relação a outras propriedades CSS adicionadas sobre um elemento, ele "toma" a mesma atitude que a do cursor?

Não entendi muito bem essa pergunta, mas se está relacianada ao fato de se a propriedades CSS adicionada de forma dinâmica atuará de forma semelhante ao caso do cursor, a resposta é sim. Como disse anteriormente Javascript sisplesmente no provê a capacidade de dinamicamente aplicar essa propriedade sob determinada condição, se a mesma puder ser implementada com CSSutlizando-se de pseudo-classes acredito que seja a abordagem a ser seguida.

3
  • Na verdade o javascript está alterando o style para que ele faça a mesma declaração do cursor: pointer no CSS? Commented 20/09/2018 às 0:52
  • Exatamente isso se chama DOM e permite o Javascript manipular os elementos definidos no documento, excluí-los e até mesmo inserir novos. Commented 20/09/2018 às 0:55
  • Obrigado pela resposta. Ajudou bastante a entender! Commented 20/09/2018 às 12:29

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 .