Mouse Cursor - Javascript and CSS

Question

The cursor: pointer is a CSS property that defines the mouse cursor as a "pointer" over a given element.

So far all quiet, it is worth mentioning that in Javascript I can also add a mouse cursor on a given event.

document.querySelector('.element').addEventListener('mouseover',() => {
  document.querySelector('.element').style.cursor = 'pointer';
});

<p class="element">Just an example</p>

Although I understand the idea I have some doubts:

• The estate cursor: pointer does not simulate a behavior to given situation? If yes, why is it defined via CSS and not by Javascript only?
• What does Javascript actually do when adding this cursor? Add a style in the element with CSS?
• In relation to other CSS properties added over an element, it "takes" the same attitude as the cursor?

Answer 1

The estate cursor:pointer does not simulate a behavior for a given situation? If so, why is it defined via CSS and not only by Javascript?

JS does not simulate the behavior of the element, it simulates the behavior of the mouse cursor. Note that HTML has several elements that by convention use the mouse cursor to give a feedback visual for the user. For example the tag <a> uses the cursor:pointer and the tag <input> uses the cursor:text. Put a cursor:text in a <div> will not change the behavior of <div> will only confuse the user, as he may understand that it is possible to type a text in the div...

There are a number of cursor types. Microsoft has already addressed this in this article: https://docs.microsoft.com/pt-br/windows/desktop/uxguide/inter-mouse

Well designed user interface (UI) objects are considered as affordance, which are visual and behavioural properties of an object that suggests how it is used. The pointer functions as a proxy for the hand, allowing users to interact with objects from screen very similar to physical objects.

This means that the cursor is an extension of the user’s hand, and it takes into consideration the type of pointer to know how it will interact with the element, whether it is clicking, dragging, typing, etc...

Another point is with respect to accessibility. Tags <button>, <label> and <input> for example are interpreted in a way by screen readers, and the "type" of cursor will hardly matter to them. The main thing in this case is to worry about code semantics, the correct use of attributes roles and of aria You can read about them here: https://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/

Observing: Right click, double click (double click) and click with the key modifiers Shift or Ctrl are three mouse interactions that are not intuitive because they have no real-world counterparts.

---

What does Javascript really do when adding this cursor? Adds a style to the CSS element?

Yes it adds the style on time, but changing cursor is not doing a :hover. Note that your code changes the cursor by putting a style cursor:pointer directly in the tag (type one style inline), but when you take the cursor off the element it continues with the cursor:pointer set in the tag. What your script does is not exactly a :hover and a screen reader wouldn’t understand that a :hover and would not "see" that the course was changed...

The :hover will always exist, once the DOM and CSSOM are built all elements will already have their style :hover declared by CSS, already with JS vc will only apply the style when the event happens in the element, something that can even depend on the hardware or the user connection to have a good performance. As you saw in the image the style of the cursor does not exist yet until the user interacts with the element. Already with CSS the style will already be "programmed", is something like the "will change", where the browser already knows that element will suffer an interaction or animation. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

---

In relation to other CSS properties added over an element, it "takes" the same attitude as the cursor?

I believe so, but I can’t say exactly how the browser and the screen readers understand JS, because in most cases they are events that are only triggered when the user does some interaction. Some of the events do not run when the page loads, but only when there is some action on the part of the user. What I can say is that the type of the cursor does not change the type of the element.

For reading:

• https://uxdesign.cc/missing-the-pointer-1dfc5cd60c8c
• https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b

Answer 2

Let’s go in pieces.

The estate cursor: pointer does not simulate a behavior to certain situation? If yes, why is it defined via CSS and not by Javascript only?

The estate cursor of the element simply changes the way the mouse cursor is visualized when placed above the element in question, so it is set in CSS that is responsible for defining the style of the elements defined in HTML there are pseudo-classes in CSS that provide us with "hooks" to determine the occurrence of a particular event in the element for example:

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

#dv:hover {
  background-color: green;
}

<div id="dv"></div>

As you can see in the example above when the mouse is over the element is applied over it the properties defined for the event in question, this is because a certain condition (in which case the mouse is over the element) has been met. The problem is that there are cases where you will want to create your own conditions dependent on dynamic values, for example, a script that takes notes from a particular student and calculates their average, and depending on the result, even see a redirect button that will depend on external values, here comes the Javascript.

What does Javascript actually do when adding this cursor? Add a style in CSS element?

Does exactly the same as the CSS except with Javascript it is possible to define a certain logic before applying this style in the element everything dynamically.

In relation to other CSS properties added over an element, he "takes" the same attitude as the cursor?

I don’t quite understand that question, but if it’s related to the fact that the property CSS added dynamically will act similarly to the cursor case, the answer is yes. As I said earlier Javascript sisplesmente does not provide the ability to dynamically apply this property under a certain condition, if it can be implemented with CSSusing pseudo-classes I believe that is the approach to be followed.