Make the cursor a hand when a user hovers over a list item

Description

Demo Code

<html>
 <head> 
  <style>
.alias {<!-- ww  w. j av  a 2  s .  c o  m-->
   cursor:alias;
}

.all-scroll {
   cursor:all-scroll;
}

.auto {
   cursor:auto;
}

.cell {
   cursor:cell;
}

.context-menu {
   cursor:context-menu;
}

.col-resize {
   cursor:col-resize;
}

.copy {
   cursor:copy;
}

.crosshair {
   cursor:crosshair;
}

.default {
   cursor:default;
}

.e-resize {
   cursor:e-resize;
}

.ew-resize {
   cursor:ew-resize;
}

.grab {
   cursor:-webkit-grab;
   cursor:grab;
}

.grabbing {
   cursor:-webkit-grabbing;
   cursor:grabbing;
}

.help {
   cursor:help;
}

.move {
   cursor:move;
}

.n-resize {
   cursor:n-resize;
}

.ne-resize {
   cursor:ne-resize;
}

.nesw-resize {
   cursor:nesw-resize;
}

.ns-resize {
   cursor:ns-resize;
}

.nw-resize {
   cursor:nw-resize;
}

.nwse-resize {
   cursor:nwse-resize;
}

.no-drop {
   cursor:no-drop;
}

.none {
   cursor:none;
}

.not-allowed {
   cursor:not-allowed;
}

.pointer {
   cursor:pointer;
}

.progress {
   cursor:progress;
}

.row-resize {
   cursor:row-resize;
}

.s-resize {
   cursor:s-resize;
}

.se-resize {
   cursor:se-resize;
}

.sw-resize {
   cursor:sw-resize;
}

.text {
   cursor:text;
}

.url {
   cursor:,auto;
}

.w-resize {
   cursor:w-resize;
}

.wait {
   cursor:wait;
}

.zoom-in {
   cursor:zoom-in;
}

.zoom-out {
   cursor:zoom-out;
}
</style> 
 </head> 
 <body> 
  <h1>Lorem ipsum dolor s</h1> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisci</p> 
  <p class="alias">Lorem</p> 
  <p class="all-scroll">Lorem ipsu</p> 
  <p class="auto">Lore</p> 
  <p class="cell">Lore</p> 
  <p class="context-menu">Lorem ipsum </p> 
  <p class="col-resize">Lorem ipsu</p> 
  <p class="copy">Lore</p> 
  <p class="crosshair">Lorem ips</p> 
  <p class="default">Lorem i</p> 
  <p class="e-resize">Lorem ip</p> 
  <p class="ew-resize">Lorem ips</p> 
  <p class="grab">Lore</p> 
  <p class="grabbing">Lorem ip</p> 
  <p class="help">Lore</p> 
  <p class="move">Lore</p> 
  <p class="n-resize">Lorem ip</p> 
  <p class="ne-resize">Lorem ips</p> 
  <p class="nesw-resize">Lorem ipsum</p> 
  <p class="ns-resize">Lorem ips</p> 
  <p class="nw-resize">Lorem ips</p> 
  <p class="nwse-resize">Lorem ipsum</p> 
  <p class="no-drop">Lorem i</p> 
  <p class="none">Lore</p> 
  <p class="not-allowed">Lorem ipsum</p> 
  <p class="pointer">Lorem i</p> 
  <p class="progress">Lorem ip</p> 
  <p class="row-resize">Lorem ipsu</p> 
  <p class="s-resize">Lorem ip</p> 
  <p class="se-resize">Lorem ips</p> 
  <p class="sw-resize">Lorem ips</p> 
  <p class="text">Lore</p> 
  <p class="url">Lor</p> 
  <p class="w-resize">Lorem ip</p> 
  <p class="wait">Lore</p> 
  <p class="zoom-in">Lorem i</p> 
  <p class="zoom-out">Lorem ip</p>  
 </body>
</html>
Make the cursor a hand when a user hovers over a list item - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
