All Mouse Pointer Style and Pointer in HTML

Home > etc > Info > All Mouse Pointer Style And Pointer .

So this file is based on all kind of cursor in HTML,

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

Cursor

The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the type of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).

Values.

<url>

A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one url() may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) must be at the end of the fallback list.

<x> <y>

Optional x- and y-coordinates indicating the cursor hotspot; the precise position within the cursor that is being pointed to.

The numbers are in units of image pixels. They are relative to the top left corner of the image, which corresponds to "0 0", and are clamped within the boundaries of the cursor image. If these values are not specified, they may be read from the file itself, and will otherwise default to the top-left corner of the image.

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<!DOCTYPE html>
<html>

<head>
<title>All Mouse Pointer Style And Pointer In HTML - CoDroiD</title>
</head>

<body>

<h1>The cursor Property</h1>

Mouse over the words to change the mouse cursor.

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

</body>

</html>

Css

Second, Create a CSS file with the name of style.css and paste the code given below, in your CSS file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

.alias {
    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: url(myBall.cur),auto;
}

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

.wait {
  cursor: wait;
}

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

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

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.