Css Course


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.
In this table there are diferent types of values that you can use for cursor property (bellow you can see some code examples):

CSS Cursors
Example, three DIVs with diferent cursor type for each one.
<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>

Cursor Images

If you want a custom cursor, you can use an image for the mouse cursor appearance. The standard image type that can be used for cursor is the .cur format.
To create a .cur file, you need specialized imagery software. A freely available cursor editor is the JustCursors, you can use this software to edit /create static or animated cursors. To download it, click: Download JustCursors.
Once you have the '.cur' file, use this syntax in your style sheet:
selector { cursor: url('image.cur'), default; }

Example:
<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.


- Another example, cursor with PNG image (a cursor rose):
<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.


Path to the image file

If you add the CSS code into an external '.css' file, take into account the fact that modern browsers (Mozilla Firefox, Google Chrome) interpret relative URLs as relative to the '.css' file. So, in the code in '.css' add the 'url' paths for '.cur' file, relative to that '.css' file.
/*
 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;
}

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
CSS cursor property - Custom Cursors

Last accessed pages

  1. Refresh page if window width changes from a device size to other (565)
  2. JavaScript code and PHP (34151)
  3. Wake Up! (11270)
  4. Select in MySQL, Output results in HTML Table (16001)
  5. Contact page - CoursesWeb (48293)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (520)
  2. PHP Unzipper - Extract Zip, Rar Archives (421)
  3. SHA256 Encrypt hash in JavaScript (402)
  4. Read Excel file data in PHP - PhpExcelReader (360)
  5. Create simple Website with PHP (332)