change the cursor pointer css
cursor
The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).
There are a bunch of them:
Views: 806
2017
-
RESULT
Preview -
HTML
Html -
CSS
Css -
JAVASCRIPT
Javascript
<!DOCTYPE html>
name="viewport" content="width=device-width, initial-scale=1"
class="container"
Change Cursor with CSS for Better User Experience
id="copyclass"copy
class="div-cursors"
class="pointer" onclick="copiarAlPortapapeles('auto')"
id="auto" class="auto"auto
class="pointer" onclick="copiarAlPortapapeles('default')"
id="default" class="default"default
class="pointer" onclick="copiarAlPortapapeles('none')"
id="none" class="none"none
class="pointer"
onclick="copiarAlPortapapeles('context-menu')"
id="context-menu" class="context-menu"
context-menu
class="pointer" onclick="copiarAlPortapapeles('help')"
id="help" class="help"help
class="pointer" onclick="copiarAlPortapapeles('pointer')"
id="pointer" class="pointer"pointer
class="pointer" onclick="copiarAlPortapapeles('progress')"
id="progress" class="progress"progress
class="pointer" onclick="copiarAlPortapapeles('wait')"
id="wait" class="wait"wait
class="pointer" onclick="copiarAlPortapapeles('cell')"
id="cell" class="cell"cell
.auto {
cursor: auto;
}
.default {
cursor: default;
}
.none {
cursor: none;
}
.context-menu {
cursor: context-menu;
}
.help {
cursor: help;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.wait {
cursor: wait;
}
.cell {
cursor: cell;
}
.crosshair {
cursor: crosshair;
}
.text {
cursor: text;
}
.vertical-text {
cursor: vertical-text;
}
.alias {
cursor: alias;
}
.copy {
cursor: copy;
}
.move {
cursor: move;
function copiarAlPortapapeles(id_elemento) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
document.getElementById("copyclass").innerHTML = aux.value;
}
