JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<h3>光标样式示例</h3>
<div id="wrapper">
  <div id="urlItem" class="png">png cursor</div>
  <div class="png-base64">png base64 cursor</div>
</div>

CSS

#wrapper div {
  min-width: 80px;
  height: 80px;
  line-height: 80px;
  display: inline-block;
  background-color: #EEE;
  margin: 5px;
  padding: 8px;
  text-align: center;
  border-radius: 3px;
}


.png-base64 { 
  cursor:...

JavaScript

var cursors = 'auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress'.split(' | ')
cursors.forEach(cursor => {
  var itemDom = document.createElement('div')
  itemDom.innerText = cursor;
  itemDom.style.cursor = cursor;
  wrapper.insertBefore(itemDom, urlItem)
})