Facebook Twitter Google Plus Linkedin RSS Youtube
Codetones

Only for Creative mind

  • Home
     
  • Technews
     
  • Tutorials
     
    • HTML
    • CSS
    • PHP
    • WordPress
  • Code FAQ
     
  • Users
     
    • Create An Account
    • Login
  • About Us
     
  • Contact Us
     
Home Page > Tutorials > CSS > Let's Take A Look At All The Cursor Effects Of CSS

Let's Take A Look At All The Cursor Effects Of CSS

author Author: Robert Calixto

icon-calendar Date: 6 months ago

icon-comment Comments: 5

Share on

Facebook Twitter Google Plus Linkedin

Using CSS, different types of mouse cursor effects can be easily created. Then the mouse pointer's shape will change when the mouse moves over that element. Therefore, declare in the style sheet is like cursor: move. Here instead of move auto, crosshair, e-resize, move, default, help, n-resize, ne-resize, nw-resize, pointer, wait, progress, s-resize, se-resize, sw-resize, w- resize, text can be used.

Practicing Project

<html>
<head>
<title> www.codetones.com</title>
<style>
body{background:#efefef;
font-family:Arial, Helvetica, sans-serif;
color:#066;}
</style>
</head>
<body >
<h2 style="cursor:auto">Touche me and see auto mouse effect</h2>
<h2 style="cursor:help">Touche me and see help mouse effect</h2>
<h2 style="cursor:s-resize">Touche me and see s-resize mouse effect</h2>
<h2 style="cursor:e-resize">Touche me and see e-resize mouse effect</h2>
<h2 style="cursor:progress">Touche me and see progress mouse effect</h2>
<h2 style="cursor:move">Touche me and see move mouse effect</h2>
<h2 style="cursor:crosshair">Touche me and see crosshair mouse effect</h2>
<h2 style="cursor:default">Touche me and see default mouse effect</h2>
<h2 style="cursor:wait">Touche me and see wait mouse effect</h2>
<h2 style="cursor:n-resize">Touche me and see n-resize mouse effect</h2>
<h2 style="cursor:nw-resize">Touche me and see nw-resize mouse effect</h2>
<h2 style="cursor:ne-resize">Touche me and see ne-resize mouse effect</h2>
<h2 style="cursor:pointer">Touche me and see pointer mouse effect</h2>
<h2 style="cursor:se-resize">Touche me and see se-resize mouse effect</h2>
<h2 style="cursor:sw-resize">Touche me and see sw-resize</h2>
<h2 style="cursor:text">Touche me and see text mouse effect</h2>
<h2 style="cursor:w-resize">Touche me and see w-resize mouse effect</h2>
</body>
</html>

                                        

Open a Notepad and enter the code at the top and save it from the file menu and click Save as as file name: index.html, Save as type: Save all files, index.html file with Mozilla Firefox and see how it looks.

Related Posts

Top 20 CSS Interview Question

Top 20 CSS Interview Question Web Designing Part 1

Various Type Of Shape In CSS

The Collection Of Various Type Of Shape In CSS

The Units Of CSS Font Size

The Units Of CSS Font Size For Professional Web Designing And Development

Leave a Reply

Mar 19

I have read a few good stuff here psosjkdd. Certainly worth bookmarking for revisiting. I surprise how much effort you put to create such a excellent informative web site.
 <a href="http://www.bestlovegift.nl/it/" >braccialetti per coppia</a> [url=http://www.bestlovegift.nl/it/]braccialetti per coppia[/url]
                                 

by braccialetti per coppia

Like
52
(0) | Reply

Mar 21

By our standards the cultures the ship will have to deal are brutal barbarians with Egypt being the best of the lot and in most places for example women are little better than slaves and chattel (Ancient Egypt was an exception).
[url=https://es.dhgate.com/product/2018-colombia-women-football-jerseys-falcao/407868450.html]clasificación mundial futbol 2018[/url]                                    
                                

by clasificación mundial futbol 2018

Mar 22

In a previous post I promised to reproduce a quote by Aristotle pertinent to this debate. I have also included a second one, which is very profound in my opinion. They were both reproduced by an American sociologist , Seymour Martin Lipset, at the beginning of his book “Political Man” (1959). Incidentally, there is a chapter in that book called “Working Class Authoritarianism” which is extremely relevant to another debate, that around the white trash that is supporting Trump.
[url=https://es.dhgate.com/product/2018-world-cup-soccer-jersey-spain-national/407832245.html]copa del mundo antigua[/url]                                    
                                

by copa del mundo antigua

Mar 22

"it's black communities that crack"
[url=https://es.dhgate.com/product/belgium-kids-soccer-jersey-kit-with-red-short/408037676.html]replica copa del mundo[/url]                                    
                                

by replica copa del mundo

Mar 23

Rem. 700 .300 Win. Mag. , very nicely scoped; that the long range ticket currently. No, haven’t access to a range over 200 yards so no skill honed for 600-800 yard shots . . . but . . .
anneau bulgari faux http://www.aabracelet.com/category/bague-bulgari-imitation                                    
                                

by anneau bulgari faux

Codetones Adblocker Notice

AdBlocker Detected

Please disable your adblocker
This site is supported by the advertisement
Please disable your adblocker to support us !

Popular Posts

Top 10 Code Editors For Programmers | Best Code Editor For Web Developer 2017
Top 10 Code Editors For Programmers | Best Code Editor For Web Developer 2017
Top 10 Common Interview Question In PHP For Job Interview
Top 10 Common Interview Question In PHP For Job Interview
Top 8 Professional HTML5 Learning Books For Beginner to Advanced
Top 8 Professional HTML5 Learning Books For Beginner to Advanced
Parse Error: Syntax Error, Unexpected 'Text' (T_STRING), Expecting ',' or ';'
Parse Error: Syntax Error, Unexpected 'Text' (T_STRING), Expecting ',' or ';'
How To Display Code Errors In Web Development
How To Display Code Errors In Web Development

Categories

  • HTML
  • CSS
  • PHP
  • WordPress

Join Codetones

Facebook Twitter Google Plus Linkedin RSS Youtube

Codetones

Codetones is the Web Solution Base Website. Here You Can Find Beginner to Advanced Level Tutorials.

Support

  • About Us
  • Contact Us
  • Codetones Mobile Apps

Accessibility

  • Terms of Use
  • Privacy Policy
  • Site Map
© Copyright 2017 Codetones. All Right Reserved

Powered by Codetones