> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 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>