Tweak Mouse Pointers using CSS

I updated the Multiply Site of my ex-high school computer organization when I realized that it would be better if the mouse pointer will be changed. Oh! The Cascading Style Sheet (CSS) is the best technique to change this. It has a rule that directly modifies the mouse pointer that a user sees.

How to add a CSS declaration in your HTML File
Adding a custom CSS in a web page could be done in different ways. But embedding such is the easier one (though not always recommended). Here is an example of an embedded CSS in a webpage:

<style type = “text/css>
rules…
</style>

Notice that by using the <STYLE> container tag, you can add a custom CSS. Inside the said tag are the rules needed for the page.

Now, here are some of the rules in modifying the page’s mouse pointer (hover on each rule inside a box to see the actual pointer):

{
cursor: auto;
}

{
cursor: crosshair;
}

{
cursor: default;
}

{
cursor: pointer;
}

{
cursor: move;
}

{
cursor: e-resize;
}

{
cursor: ne-resize;
}

{
cursor: nw-resize;
}

{
cursor: n-resize;
}

{
cursor: se-resize;
}

{
cursor: sw-resize;
}

{
cursor: s-resize;
}

{
cursor: w-resize;
}

{
cursor: text;
}

{
cursor: wait;
}

{
cursor: help;
}

By the way, you can embed the tag inside the or tags. Though most developers are using the former. These sample rules are taken from ShewShack site.

8 Comments

Comments RSS TrackBack Identifier URI