@mrfrontend/cursor
Version:
CSS tool that defines a class for each css cursor value.
87 lines (80 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- cursor CSS -->
<link rel="stylesheet" href="cursor.css">
<!-- custom table css -->
<style>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.cursor-list {
border-collapse: collapse;
width: 100%;
}
.cursor-list td, .cursor-list th {
border: 1px solid #ddd;
padding: 8px;
}
.cursor-list tr:nth-child(even) {
background-color: #f2f2f2;
}
.cursor-list tr:hover {
background-color: #ddd;
}
.cursor-list th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<title>cursor</title>
</head>
<body>
<h2>List of different values for the CSS property <b>cursor</b></h2>
<p>Hover the cell to see an example of the cursor value.</p>
<table class="cursor-list">
<tr><th>Value</th><th>CSS class</th></tr>
<tr class="cursor--auto"><td>auto</td><td>.cursor--auto</td></tr>
<tr class="cursor--default"><td>default</td><td>.cursor--default</td></tr>
<tr class="cursor--none"><td>none</td><td>.cursor--none</td></tr>
<tr class="cursor--context-menu"><td>context-menu</td><td>.cursor--context-menu</td></tr>
<tr class="cursor--help"><td>help</td><td>.cursor--help</td></tr>
<tr class="cursor--pointer"><td>pointer</td><td>.cursor--pointer</td></tr>
<tr class="cursor--progress"><td>progress</td><td>.cursor--progress</td></tr>
<tr class="cursor--wait"><td>wait</td><td>.cursor--wait</td></tr>
<tr class="cursor--cell"><td>cell</td><td>.cursor--cell</td></tr>
<tr class="cursor--crosshair"><td>crosshair</td><td>.cursor--crosshair</td></tr>
<tr class="cursor--text"><td>text</td><td>.cursor--text</td></tr>
<tr class="cursor--vertical-text"><td>vertical-text</td><td>.cursor--vertical-text</td></tr>
<tr class="cursor--alias"><td>alias</td><td>.cursor--alias</td></tr>
<tr class="cursor--copy"><td>copy</td><td>.cursor--copy</td></tr>
<tr class="cursor--move"><td>move</td><td>.cursor--move</td></tr>
<tr class="cursor--no-drop"><td>no-drop</td><td>.cursor--no-drop</td></tr>
<tr class="cursor--not-allowed"><td>not-allowed</td><td>.cursor--not-allowed</td></tr>
<tr class="cursor--grab"><td>grab</td><td>.cursor--grab</td></tr>
<tr class="cursor--grabbing"><td>grabbing</td><td>.cursor--grabbing</td></tr>
<tr class="cursor--all-scroll"><td>all-scroll</td><td>.cursor--all-scroll</td></tr>
<tr class="cursor--col-resize"><td>col-resize</td><td>.cursor--col-resize</td></tr>
<tr class="cursor--row-resize"><td>row-resize</td><td>.cursor--row-resize</td></tr>
<tr class="cursor--n-resize"><td>n-resize</td><td>.cursor--n-resize</td></tr>
<tr class="cursor--e-resize"><td>e-resize</td><td>.cursor--e-resize</td></tr>
<tr class="cursor--s-resize"><td>s-resize</td><td>.cursor--s-resize</td></tr>
<tr class="cursor--w-resize"><td>w-resize</td><td>.cursor--w-resize</td></tr>
<tr class="cursor--ne-resize"><td>ne-resize</td><td>.cursor--ne-resize</td></tr>
<tr class="cursor--nw-resize"><td>nw-resize</td><td>.cursor--nw-resize</td></tr>
<tr class="cursor--se-resize"><td>se-resize</td><td>.cursor--se-resize</td></tr>
<tr class="cursor--sw-resize"><td>sw-resize</td><td>.cursor--sw-resize</td></tr>
<tr class="cursor--ew-resize"><td>ew-resize</td><td>.cursor--ew-resize</td></tr>
<tr class="cursor--ns-resize"><td>ns-resize</td><td>.cursor--ns-resize</td></tr>
<tr class="cursor--nesw-resize"><td>nesw-resize</td><td>.cursor--nesw-resize</td></tr>
<tr class="cursor--nwse-resize"><td>nwse-resize</td><td>.cursor--nwse-resize</td></tr>
<tr class="cursor--zoom-in"><td>zoom-in</td><td>.cursor--zoom-in</td></tr>
<tr class="cursor--zoom-out"><td>zoom-out</td><td>.cursor--zoom-out</td></tr>
</table>
</body>
</html>