How to Change a Mouse Icon in HTML
Changing the mouse cursor in HTML pages is a nice touch for an impressive user interface. It's a creative way to prompt users for action, or it can be used to signify a wait time such as the hourglass symbol. There are several built-in browser mouse cursors that can be used in HTML web applications. Only a few extra lines of code are needed.
Other People Are Reading
Instructions
-
-
1
Setup the styles in the header tags. The code below sets up a CSS class that changes the mouse cursor when the user hovers over a paragraph (the HTML tag for paragraph is "p"). This class is called later in the code.
<html>
<head>
<style>
p { cursor: crosshair; }
</style>
</head> -
2
Create a paragraph section in the HTML page. Define a paragraph and add some text for the user to hover and view the new cursor. The code below is a paragraph that is a part of the webpage body.
<body>
<p>Hover over me</p>
</body> -
-
3
Save the new HTML page.
-
4
Open the new HTML page in your browser to test the code.
-
5
Hover the mouse over the new paragraph. If the code is properly executed, the cursor changes to a crosshair.
-
1
