CodePen Embed - CSS cursor Property

<div class="content">
  <div id="text" style="font-size: 50px;">Hover Me</div>
  </br>
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p></div>
    
  <div class="buttons">
  <button class="button" onclick="fAlias()">alias</button> 
  <button class="button" onclick="allScroll()">all-scroll</button>  
   <button class="button" onclick="fAuto()">auto</button>   
   <button class="button" onclick="fCell()">cell</button>
   <button class="button" onclick="contexMenu()">context-menu</button>
   <button class="button" onclick="colResize()">col-resize</button>
   <button class="button" onclick="fCopy()">copy</button>
   <button class="button" onclick="fCrosshair()">crosshair</button>
   <button class="button" onclick="eResize()">e-resize</button>
   <button class="button" onclick="ewResize()">ew-resize</button>
   <button class="button" onclick="fGrab()">grab</button>
    <button class="button" onclick="fGrabbing()">grabbing</button>
    <button class="button" onclick="fHelp()">help</button>
    <button class="button" onclick="fMove()">move</button>
    <button class="button" onclick="nResize()">n-resize</button>
    <button class="button" onclick="neResize()">ne-resize</button>
    <button class="button" onclick="neswResize()">nesw-resize</button>
    <button class="button" onclick="nsResize()">ns-resize</button>
    <button class="button" onclick="nwResize()">nw-resize</button>
    <button class="button" onclick="nwseResize()">nwse-resize</button>
    <button class="button" onclick="noDrop()">no-drop</button>
    <button class="button" onclick="fNone()">none</button>
    <button class="button" onclick="notAllowed()">not-allowed</button>
    <button class="button" onclick="fPointer()">pointer</button>
    <button class="button" onclick="fProgress()">progress</button>
    <button class="button" onclick="rowResize()">row-resize</button>
    <button class="button" onclick="sResize()">s-resize</button>
    <button class="button" onclick="seResize()">se-resize</button>
    <button class="button" onclick="swResize()">sw-resize</button>
    <button class="button" onclick="fText()">text</button>
    <button class="button" onclick="fUrl()">url</button>
    <button class="button" onclick="verticalText()">vertical-text</button>
    <button class="button" onclick="wResize()">w-resize</button>
    <button class="button" onclick="fWait()">wait</button>
    <button class="button" onclick="zoomIn()">zoom-in</button>
    <button class="button" onclick="zoomOut()">zoom-out</button>
  </div>
</div>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #38a3a5;
}

.content {
  position: relative;
}

.buttons {
  position: absolute;
  left:-200px;
  top:-220px;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding: .5px;
  width: 150px;
  margin:.5px;
  transition: .2s;
  font-weight: bold;
  font-size:10px;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 350px;
  top:100px;
  z-index:-1;
}

#text {
  font-family: arial;
  position: relative;
  width:100%;
  left: 0;
  top: 0;
}

function fAlias() {
 document.getElementById("text").style.cursor="alias" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: alias;") {
    x.innerHTML = "cursor: alias;";
  } else {
    x.innerHTML = "cursor: alias;";
  }
}

function allScroll() {
 document.getElementById("text").style.cursor="all-scroll" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: all-scroll;") {
    x.innerHTML = "cursor: all-scroll;";
  } else {
    x.innerHTML = "cursor: all-scroll;";
  }
}

function fAuto() {
 document.getElementById("text").style.cursor="auto" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: auto;") {
    x.innerHTML = "cursor: auto;";
  } else {
    x.innerHTML = "cursor: auto;";
  }
}

function fCell() {
 document.getElementById("text").style.cursor="cell" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: cell;") {
    x.innerHTML = "cursor: cell;";
  } else {
    x.innerHTML = "cursor: cell;";
  }
}

function contexMenu() {
 document.getElementById("text").style.cursor="context-menu" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: context-menu;") {
    x.innerHTML = "cursor: context-menu;";
  } else {
    x.innerHTML = "cursor: context-menu;";
  }
}

function colResize() {
 document.getElementById("text").style.cursor="context-menu" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: col-resize;") {
    x.innerHTML = "cursor: col-resize;";
  } else {
    x.innerHTML = "cursor: col-resize;";
  }
}

function fCopy() {
 document.getElementById("text").style.cursor="copy" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: copy;") {
    x.innerHTML = "cursor: copy;";
  } else {
    x.innerHTML = "cursor: copy;";
  }
}

function fCrosshair() {
 document.getElementById("text").style.cursor="crosshair" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: crosshair;") {
    x.innerHTML = "cursor: crosshair;";
  } else {
    x.innerHTML = "cursor: crosshair;";
  }
}

function eResize() {
 document.getElementById("text").style.cursor="e-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: e-resize;") {
    x.innerHTML = "cursor: e-resize;";
  } else {
    x.innerHTML = "cursor: e-resize;";
  }
}

function ewResize() {
 document.getElementById("text").style.cursor="ew-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: ew-resize;") {
    x.innerHTML = "cursor: ew-resize;";
  } else {
    x.innerHTML = "cursor: ew-resize;";
  }
}

function fGrab() {
 document.getElementById("text").style.cursor="grab" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: grab;") {
    x.innerHTML = "cursor: grab;";
  } else {
    x.innerHTML = "cursor: grab;";
  }
}

function fGrabbing() {
 document.getElementById("text").style.cursor="grabbing" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: grabbing;") {
    x.innerHTML = "cursor: grabbing;";
  } else {
    x.innerHTML = "cursor: grabbing;";
  }
}

function fHelp() {
 document.getElementById("text").style.cursor="help" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: help;") {
    x.innerHTML = "cursor: help;";
  } else {
    x.innerHTML = "cursor: help;";
  }
}

function fMove() {
 document.getElementById("text").style.cursor="move" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: move;") {
    x.innerHTML = "cursor: move;";
  } else {
    x.innerHTML = "cursor: move;";
  }
}

function nResize() {
 document.getElementById("text").style.cursor="n-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: n-resize;") {
    x.innerHTML = "cursor: n-resize;";
  } else {
    x.innerHTML = "cursor: n-resize;";
  }
}

function neResize() {
 document.getElementById("text").style.cursor="ne-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: ne-resize;") {
    x.innerHTML = "cursor: ne-resize;";
  } else {
    x.innerHTML = "cursor: ne-resize;";
  }
}

function neswResize() {
 document.getElementById("text").style.cursor="nesw-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: nesw-resize;") {
    x.innerHTML = "cursor: nesw-resize;";
  } else {
    x.innerHTML = "cursor: nesw-resize;";
  }
}

function nsResize() {
 document.getElementById("text").style.cursor="ns-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: ns-resize;") {
    x.innerHTML = "cursor: ns-resize;";
  } else {
    x.innerHTML = "cursor: ns-resize;";
  }
}

function nwResize() {
 document.getElementById("text").style.cursor="nw-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: nw-resize;") {
    x.innerHTML = "cursor: nw-resize;";
  } else {
    x.innerHTML = "cursor: nw-resize;";
  }
}

function nwseResize() {
 document.getElementById("text").style.cursor="nwse-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: nwse-resize;") {
    x.innerHTML = "cursor: nwse-resize;";
  } else {
    x.innerHTML = "cursor: nwse-resize;";
  }
}

function noDrop() {
 document.getElementById("text").style.cursor="no-drop" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: no-drop;") {
    x.innerHTML = "cursor: no-drop;";
  } else {
    x.innerHTML = "cursor: no-drop;";
  }
}

function fNone() {
 document.getElementById("text").style.cursor="none" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: none;") {
    x.innerHTML = "cursor: none;";
  } else {
    x.innerHTML = "cursor: none;";
  }
}

function fPointer() {
 document.getElementById("text").style.cursor="pointer" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: pointer;") {
    x.innerHTML = "cursor: pointer;";
  } else {
    x.innerHTML = "cursor: pointer;";
  }
}

function fProgress() {
 document.getElementById("text").style.cursor="progress" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: progress;") {
    x.innerHTML = "cursor: progress;";
  } else {
    x.innerHTML = "cursor: progress;";
  }
}

function rowResize() {
 document.getElementById("text").style.cursor="row-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: row-resize;") {
    x.innerHTML = "cursor: row-resize;";
  } else {
    x.innerHTML = "cursor: row-resize;";
  }
}

function sResize() {
 document.getElementById("text").style.cursor="s-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: s-resize;") {
    x.innerHTML = "cursor: s-resize;";
  } else {
    x.innerHTML = "cursor: s-resize;";
  }
}

function seResize() {
 document.getElementById("text").style.cursor="se-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: se-resize;") {
    x.innerHTML = "cursor: se-resize;";
  } else {
    x.innerHTML = "cursor: se-resize;";
  }
}

function swResize() {
 document.getElementById("text").style.cursor="sw-resize" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: sw-resize;") {
    x.innerHTML = "cursor: sw-resize;";
  } else {
    x.innerHTML = "cursor: sw-resize;";
  }
}

function fText() {
 document.getElementById("text").style.cursor="text" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: text;") {
    x.innerHTML = "cursor: text;";
  } else {
    x.innerHTML = "cursor: text;";
  }
}

function verticalText() {
document.getElementById("text").style.cursor='vertical-text'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: vertical-text;") {
    x.innerHTML = "cursor: vertical-text;";
  } else {
    x.innerHTML = "cursor: vertical-text;";
  }
}

function wResize() {
document.getElementById("text").style.cursor='w-resize'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: w-resize;") {
    x.innerHTML = "cursor: w-resize;";
  } else {
    x.innerHTML = "cursor: w-resize;";
  }
}

function fWait() {
document.getElementById("text").style.cursor='wait'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: wait;") {
    x.innerHTML = "cursor: wait;";
  } else {
    x.innerHTML = "cursor: wait;";
  }
}

function zoomIn() {
document.getElementById("text").style.cursor='zoom-in'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: zoom-in;") {
    x.innerHTML = "cursor: zoom-in;";
  } else {
    x.innerHTML = "cursor: zoom-in;";
  }
}

function zoomOut() {
document.getElementById("text").style.cursor='zoom-out'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: zoom-out;") {
    x.innerHTML = "cursor: zoom-out;";
  } else {
    x.innerHTML = "cursor: zoom-out;";
  }
}

function notAllowed() {
document.getElementById("text").style.cursor='not-allowed'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: not-allowed;") {
    x.innerHTML = "cursor: not-allowed;";
  } else {
    x.innerHTML = "cursor: not-allowed;";
  }
}

function fUrl() {
document.getElementById("text").style.cursor='url("https://lenadesign.org/wp-content/uploads/2022/06/cursor.png"), auto'
  
  var x = document.getElementById("code");
  if (x.innerHTML === "cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png);") {
    x.innerHTML = "cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png);";
  } else {
    x.innerHTML = "cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png);";
  }
}

Run Pen

This Pen is owned by Lena Stanley on CodePen.

See more by @lenasta92579651 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.