# Hover Effects (adding Pseudo-classes)

When editing elements in the builder, you will notice a dropdown in the upper right corner of the style manager with a title of “State.” If you click on this dropdown you can select from a few different states which will change the appearance or behavior of an element while in that state.

{% hint style="danger" %}
While editing be very mindful of what “State” you are editing in at all times. One can very easily switch to a different state to edit, and then continue editing the rest of their page all in the same state unintentionally.
{% endhint %}

#### **Below are some examples of what each of these states can do:** <a href="#hovereffects-addingpseudo-classes-belowaresomeexamplesofwhateachofthesestatescando" id="hovereffects-addingpseudo-classes-belowaresomeexamplesofwhateachofthesestatescando"></a>

<figure><img src="/files/nwPYlXeh1Ok46axHHKAS" alt=""><figcaption></figcaption></figure>

## **States** <a href="#hovereffects-addingpseudo-classes-states" id="hovereffects-addingpseudo-classes-states"></a>

#### In the default **State** selection, all elements will be given styling in their neutral state on the page without user interaction. <a href="#hovereffects-addingpseudo-classes-inthedefaultstateselection-allelementswillbegivenstylingintheirneu" id="hovereffects-addingpseudo-classes-inthedefaultstateselection-allelementswillbegivenstylingintheirneu"></a>

***

#### **Hover** effects what the element will do when a user hovers over it (Only applies for desktop) <a href="#hovereffects-addingpseudo-classes-hovereffectswhattheelementwilldowhenauserhoversoverit-onlyappliesf" id="hovereffects-addingpseudo-classes-hovereffectswhattheelementwilldowhenauserhoversoverit-onlyappliesf"></a>

#### For example, Hover can be used to change a button's color when the user's pointer hovers over it. <a href="#hovereffects-addingpseudo-classes-forexample-hovercanbeusedtochangeabuttonscolorwhentheuserspointerh" id="hovereffects-addingpseudo-classes-forexample-hovercanbeusedtochangeabuttonscolorwhentheuserspointerh"></a>

***

#### **Click**, effects what the element does when it is clicked by a user. <a href="#hovereffects-addingpseudo-classes-click-effectswhattheelementdoeswhenitisclickedbyauser" id="hovereffects-addingpseudo-classes-click-effectswhattheelementdoeswhenitisclickedbyauser"></a>

***

#### **Even/Odd** changes the color of the text based on whether the text is on an even or an odd line. See associated article for more reference: [W3 Schools :nth-of-type() Article](https://www.w3schools.com/cssref/sel_nth-of-type.asp). <a href="#hovereffects-addingpseudo-classes-even-oddchangesthecolorofthetextbasedonwhetherthetextisonanevenora" id="hovereffects-addingpseudo-classes-even-oddchangesthecolorofthetextbasedonwhetherthetextisonanevenora"></a>

***

<figure><img src="/files/scwDUYK2Yyka0EG1Weie" alt="" width="315"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/hover-effects-adding-pseudo-classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.