Mouse cursor - JavaScript and CSS

Does cursor:pointer property not simulate behavior for a given situation? If so, why is it set via CSS and not just by JavaScript?

JS does not simulate the behavior of the element, it simulates the behavior of the mouse cursor. Notice that HTML has several elements that are conventionally used by the mouse cursor to give a visual feedback to the user. For example, the <a> tag uses cursor:pointer and the <input> tag uses cursor:text . Putting a cursor:text into a <div> will not change the behavior of <div> will only confuse the user because he can understand that it is possible to type text in div ...

There are a number of cursor types. MicroSoft itself has addressed this in this article: link

  

Well-designeduserinterface(UI)objectsareconsidered  suchasaffordance,whicharevisualandbehavioralproperties  ofanobjectthatsuggestshowitisused.Thepointeractsasa  proxyforthehand,allowinguserstointeractwith  screenmuchlikephysicalobjects.

Thismeansthatthecursorisanextensionoftheuser'shand,andittakesintoaccountthetypeofthepointertoknowhowitwillinteractwiththeelement,whetheritisclicking,dragging,typing,etc...

Anotherpointisaboutaccessibility.The<button>,<label>,and<input>tagsareinterpretedinawaybythescreenreaders,andthelittle"cursor type" will matter to them. The main one in this case is to worry about code semantics, the correct use of roles and aria attributes can read about them here: link

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

What does JavaScript actually do when adding this cursor? Add a style to the element with CSS?

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

The:hoverwillalwaysexist,oncetheDOMandCSSOMisbuiltallelementswillalreadyhavetheirstyleof:hoverdeclaredbyCSS,alreadywithJSyouwillonlyapplythestylewhentheeventhappensintheelement,somethingthatmayevendependonthehardwareortheuser'sconnectiontohaveagoodperformance.Asyousawintheimagethecursorstyledoesnotyetexistuntiltheuserinteractswiththeelement.WithCSSalreadythestylewillalreadybe"programmed", it is something like " will change ", where the browser already knows that element will undergo an interaction or animation. link

Regarding other CSS properties added on an element, does it "take" the same attitude as the cursor?

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

Read:

• link
• link

Let's break it down.

  

The cursor: pointer property does not simulate behavior for   certain situation? If so, why is it defined via CSS and not   only by JavaScript?

The cursor property of the element simply changes how the mouse cursor is viewed when placed above the element in question, so it is set to CSS which is responsible for setting 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 certain 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 the properties defined for the event in question are applied to it, this is because a certain condition (in this case, that the mouse is on the element) has been fulfilled. The problem is that there are cases where you will want to create your own conditions dependent on dynamic values eg a script that receives the grades of a particular student and calculates their average, and depending on the result, see a redirection button this will depend on external values, then enter Javascript .

  

What does JavaScript really do when adding this cursor? Add one   style in element with CSS?

It does exactly the same as CSS except that with Javascript you can define a particular logic before you apply that style to the whole element dynamically.

  

Regarding other CSS properties added on an element,   does it "take" the same attitude as the cursor?

I do not quite understand this question, but if it is related to whether the CSS properties added dynamically will act similarly to the cursor case, the answer is yes. As previously stated Javascript simply does not provide the ability to dynamically apply this property under a given condition, if it can be implemented with CSS using pseudo-classes I believe that is the approach to be followed.