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.
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.
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.
When the artboard is exported and viewed in the browser the styles will be applied as you've described them.
Using the hover pseudo state we're saying "Apply these styles when the mouse is hovering over the selected element".
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>
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
Last modified 3yr ago