Adding Hover Effects

Hover effects

In most software interactive elements typically show a visual change in state when they can be interacted with.

For example, when a button is clickable, the color of the button changes when the mouse is over the button. When text is clickable, the text has an underline underneath it or it shows an underline underneath it when the mouse is over it.

These type of interactions are sometimes called hover effects or pseudo states.

We can add our own pseudo states to our artboard or entire document including all artboards.

Another way to put it is that hover effects are the styles that are applied when the mouse is moved over an element.

There are currently three methods to define hover effects.

Method 1 Define a hover effect in the page stylesheet using an id, class or type selector rule.

Method 2 Define a style declaration in a code block.

Method 3 Use a second element as a "hover element" and all it's styles to be applied on hover

After defining a style declaration you may need to have any elements reference it.

Method 1 - Defining a hover effect for an element using stylesheet template

Open the Element Options panel or dialog and select the artboard.

Click on the stylesheet template button.

Element Options

Stylesheet template button

In the stylesheet template add the stylesheet token and then the styles that you want to add to the artboard view.

Style for an element with an ID of "MyRectangle"

A style rule or style declaration is a way to select define a style or behavior for an element or a set of elements. You select specify which elements using a selector. More information linked at the end of this page.

Method 2 - Defining a hover effect class using a code block

Add a code block to the artboard.

In the markup inside field add the style declarations in style tags.

When the artboard is exported and viewed in the browser the styles will be applied as you've described them.

With the code block above we are using the global or universal selector.

Using the hover pseudo state we're saying "Apply these styles when the mouse is hovering over the selected element".

Use Web Tools to see styles you've added in the stylesheet or in code blocks

Declaring classes

Some style declarations specifically "select" certain elements on the page.

With an ID selector you are saying apply these styles to the element with this ID.

#myElement {
    color: blue;
}

With a Type selector you are saying apply these styles to all of these types of elements.

li {
    color: blue;
}

With a Class selector you are simply saying here are some styles. Don't apply them to anything with them.

.buttons {
    color: blue;
}

Once you have classes defined you can apply them to any elements you choose.

In the class attribute specify the name of the class.

Before:

<p>Hello world</p>

With a class defined:

<p class="buttons">Hello world</p>

Existing Classes

Once you define style rules and style declarations once you can reuse them across artboards and projects.

The following is one way to add an underline to all hyperlinks when the mouse is hovered over a link:

<style>

/* remove underline from hyperlinks */
a {
    text-decoration: none;
}

/* remove underline from hyperlinks nested in a div */
a:hover div {
    text-decoration: underline;
}

/* add underline to hyperlinks on hover */
a:hover {
    text-decoration: underline;
}

/* add underline to hyperlinks nested in a div on hover */
a:hover div {
    text-decoration: underline;
}

</style>

Method 3 - Assigning a hover element

To assign a hover element first create an element that has all the styles you want to apply to the first element when it is hovered (video below):

1. Create your element (say Text element)

2. Create a second text element (the Hover Element)

3. Change the styles of the Hover Element to look like how you want the first element to look when the mouse is hovered over it

4. Select the Hover Element and then select the first text element

5. Uncheck the Export option

6. In the Element Property Panel select the Hover Element from the drop down list

7. Export the page

8. You may need to remove the sizing or positioning of the Hover Element if that is not the features you want

Learn to style HTML using CSS - Learn web development | MDN

CSS selectors - Learn web development | MDN

Pseudo-classes and pseudo-elements - Learn web development | MDN

:hover - CSS: Cascading Style Sheets | MDN