# Adding a cursor over on hover

You can change the [cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) when the mouse is over an element or an area. There are two methods described here: 

* Defining a style declaration and assigning it in the classes field
* Defining the cursor style in the styles fieldf

#### Defining a style declaration 

* Create a [code block](https://velara-3.gitbook.io/web-export/creating-code-blocks) (or define the class in the page [stylesheet template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template))
* In the code block create a style declaration named pointerCursor: 

```
<style>
.pointerCursor {
   cursor: pointer;
}
</style>
```

If you are defining the class in the [stylesheet template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template) then exclude the style tags like so:&#x20;

```
.pointerCursor {
    cursor: pointer;
}
```

Assign the [class](https://velara-3.gitbook.io/web-export/element-options/classes) to the element you want to have a cursor:&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MDVm6pHmqx0Gtk0dL17%2F-MDVodjhs5dRkfBGVCxI%2Fimage.png?alt=media\&token=a6e43d56-1ca8-4311-86b8-c7996801fc0d)

To have a cursor change only when the mouse is hovering over the element use the [hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo state:&#x20;

```
<style>
.pointerCursor:hover {
   cursor: pointer;
}
</style>
```

{% hint style="info" %}
Unlike other styles and properties the cursor only changes when the mouse is over an element so either style declaration will work.&#x20;
{% endhint %}

#### Defining the cursor style in the styles field

You can also add a cursor by setting the cursor style in the [styles](https://velara-3.gitbook.io/web-export/element-options/untitled) field:&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MDVm6pHmqx0Gtk0dL17%2F-MDVnAyuWTTIc41_Vete%2Fimage.png?alt=media\&token=c35d1650-bebc-454c-af2b-324e89ce8709)

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/cursor>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>" %}