Spectre Cursor utilities are spectre classes that specify the mouse cursor which is displayed when mouseover is performed by the user or while pointing at an element. In CSS, refer to the CSS cursor property for a better understanding
Spectre Cursor utility class:
- c-hand: This class is used to make the cursor into a hand sign.
- c-move: This class is used to make the cursor into a moving sign.
- c-zoom-in: This class is used to make the cursor into a zoom-in (plus in magnifier) sign.
- c-zoom-out: This class is used to make the cursor into a zoom-out (minus in magnifier) sign.
- c-not-allowed: This class is used to make the cursor into the not-allowed sign.
- c-auto: This class is used to make the cursor into the auto sign.
Syntax:
<div class="c-hand"> .... </div>
Example: Below example illustrate the Spectre Cursor utilities.
HTML
<!DOCTYPE html> <html>
<head>
<title>SPECTRE Cursor Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Cursor Class</strong>
<br><br>
</center>
<div class="container">
<div class="bg-success c-hand">
The cursor is hand
</div>
<br>
<div class="bg-success c-move">
The cursor is move
</div>
<br>
<div class="bg-success c-zoom-in">
The cursor is zoom-in
</div>
<br>
<div class="bg-success c-zoom-out">
The cursor is zoom-out
</div>
<br>
<div class="bg-success c-not-allowed">
The cursor is not-allowed
</div>
<br>
<div class="bg-success c-auto">
The cursor is auto
</div>
</div>
</body>
</html>
|
Output:
Spectre Cursor utilities
Reference: https://picturepan2.github.io/spectre/utilities/cursors.html