The cursor property can be used to change and control the appearance of the mouse cursor.
Syntax:
selector { cursor: value; }- value - specifies the type of cursor to be displayed when pointing on an elemen.
<style> #ex1 div { display: inline-block; width: 28%; height: 75px; margin: 2px 1%; background: #d0d0fe; text-align: center; } #idiv1 { cursor: pointer; } #idiv2 { cursor: wait; } #idiv3 { cursor: move; } </style> <h4>Example CSS cursor property</h4> <p>Move the mouse over each cell.</p> <div id='ex1'> <div id='idiv1'>Value - pointer</div> <div id='idiv2'>Value - wait</div> <div id='idiv3'>Value - move</div> <br style='clear:left;' /> </div>
<style> #ex2 { height: 100px; background: #fefeae; cursor: url('css/bluearrow.cur'), default; } </style> <h4>Example image cursor</h4> <p>Place your mouse over the text bellow.</p> <div id='ex2'>Cursor Image, '.cur'</div>
Modern browsers, like Mozilla Firefox, Google Chrome, can use PNG images for cursor.
<style> #ex3 { height: 100px; background: #fefeae; cursor: url('css/rosecursor.png'), default; } </style> <h4>Example PNG image cursor</h4> <p>Place your mouse over the text bellow.</p> <div id='ex3'>Cursor Images, '.png' (for modern browsers).</div>
Click: Cursor Images to download an archive with some '.cur' and '.ani' files that you can use to test the examples presented in this tutorial.
/* The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS file */ #id { cursor: url('bluearrow.cur'), default; }
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
h2 { font-family:"Calibri",sans-serif; }
var elm_list = document.querySelectorAll("div.cls"); var nr_elms = elm_list.length; // number of selected items alert(nr_elms);
$arr =[1, 2, 3, 4); $arr_sum = array_sum($arr); echo $arr_sum; // 10