Styling the Cursor
Description
The cursor property lets you change the appearance of the cursor.
- auto
- crosshair
- default
- e-resize
- help
- move
- n-resize
- ne-resize
- nw-resize
- pointer
- progress
- s-resize
- se-resize
- sw-resize
- text
- w-resize
- wait
The cursor property cause the browser to display different cursor when the mouse passes over the styled element.
Example
The following code uses the cursor Property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p {<!-- ww w. j av a2 s.c o m-->
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#myID {
font-size: x-large;
border: medium solid white;
background-color: green;
color: rgba(255, 255, 255, 0.7);
cursor: progress;
}
</style>
</head>
<body>
<p id="mytext">
this is a <span id="myID">test</span>.
</p>
</body>
</html>