1

So, I am wondering how I can set the cursor as a pointer via the style HTML element attribute. Basically, how would you change the style attribute to do something upon being hovered over and then have that be cursor: pointer; rather than being in an actual CSS file (internal/external).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
CyanCoding
  • 1,012
  • 1
  • 12
  • 35
  • You set it like you would any other property with the style attribute? What makes you think it would be any different with the cursor property? – BoltClock Sep 24 '17 at 13:35
  • @BoltClock I suspected you would need to have a `:hover` of sorts. – CyanCoding Sep 24 '17 at 13:37
  • Ah, I have to admit there isn't any clear answer to whether the :hover makes any difference - which has been asked a number of times now, with no clear answer (other than IE6 support). At least, in the vast majority of use cases, it does not appear to make a difference, so you probably don't have to worry about it. (In the event you did need to specify a pseudo-class, [you'd be out of luck](https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles).) – BoltClock Sep 24 '17 at 13:54

1 Answers1

0

Here is the syntax and some examples of pointer shapes that you can specify:

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>
user3857924
  • 86
  • 3
  • 15