Rollover

The Rollover macro allows the quick and easy creation of CSS rollover effects.

Rollover effects are often used to create a button of some kind.

This macro will require additional CSS styling which can be added using the Stylesheet macro, the Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use Stylesheet macro.

Add a Rollover Macro to your page

Navigate to the page you want to edit.
Click Edit.
Click Insert More Content → Other Macros .
Select the Rollover macro from the Macro Browser.

Complete the desired fields.


Parameter	Description	Type	Default
Normal CSS Class	Specify the class name for the normal (roll-out) state	string	none
Roll Over CSS Class	An optional class name for the roll-over state (defaults to the %class%-rollover)	string	class-rollover
Link	The page that the rollover links to when clicked	string	none
Target	An optional external target to modify.	string	none
Target CSS Class	An optional class name to use solely for the external target (defaults to class)	string	none
Target Roll Over CSS Class	An optional class name to use solely for the external target roll-over state (defaults to %targetclass%-rollover)	string	none
Output Type	Specifies that the macro will be displayed inline with the surrounding content	single select	Inline

Click Insert.
The macro placeholder displays.

Basic Use

The following example shows you how to create a basic rollover using the rollover macro and the Stylesheet macro.

Edit a page and insert a Rollover macro.
In the Normal CSS class field, enter the name of the class (in this example = test)
In the Roll Over CSS class field, enter the name of the class for the rollover state, or leave it blank if you use what is in the Normal CSS class field plus "-rollover" (the default).
Save the macro.
In the Rollover macro placeholder, add a div macro as a container for your rollover text.
Save the page to see the text with a color background that changes on hover.