Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. How to section

Adding Hover Effects

Hover effects

PreviousEmbedding FontsNextStyling Hyperlinks

Last updated 4 years ago

Was this helpful?

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

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

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

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

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

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 . More information linked at the end of this page.

Add a to the artboard.

In the field add the style declarations in style tags.

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

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

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

selector
code block
markup inside
universal
hover
Web Tools
pseudo
LogoLearn to style HTML using CSS - Learn web development | MDN
LogoCSS selectors - Learn web development | MDN
LogoPseudo-classes and pseudo-elements - Learn web development | MDN
Element Options
Stylesheet template button
Style for an element with an ID of "MyRectangle"
Logo:hover - CSS: Cascading Style Sheets | MDN