Rollover

The Rollover macro lets you easily add CSS rollover effects to your content. This macro requires additional CSS styling, which can be added using the CSS Stylesheet macro, the Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use our CSS Stylesheet macro.

With some knowledge of CSS you can create some interesting effects with the Rollover macro.

Add Rollover 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
Target ID	This should match the ID of the element you are applying the effect to. Add a # to the start of the ID.ex. The ID parameter in a Div macro is `target`. Then the Target ID in the Rollover macro should be `#target`.	string	none
Normal CSS Class	CSS class name for the normal (roll-out) state. Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the `.` selector in the class name	string	none
Roll Over CSS Class	CSS class name for the rollover state. Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the `.` selector in the class name	string	none
URL	The page that the rollover links to when clicked	string	none

Click Insert.
The macro placeholder displays.

Migration of Previous Versions of Rollover

Because of changes made by Atlassian in Confluence 5.9, there is no possibility to provide backward compatibility when using the Rollover macro. With the previous versions, it was possible to identify what elements the Rollover should be applied just by inserting them directly within the body of the Rollover macro. With Confluence 5.9 onwards, it is possible to achieve the same results just by following a few steps. The process involves removing the old macro and adding the new one.

Because of the way that the new macro works, the location is not important, so you could group all the new Rollover macros together at the end of the page.

Get all the pages where the old Rollover macro is used by typing the string macroName: rollover* in the search toolbar.
Access the identified pages in edit mode and repeat the next steps for all the Rollover (Deprecated) macros found.
Create a new Rollover macro with the same values for the Normal CSS class, Roll Over CSS class, and Link parameters of the old Rollover (Deprecated) macro. Insert a unique 'Target ID' that is going to identify to what element the rollover is going to be applied.
Add the same ID to the element for which Rollover should be applied (in this example, please use the same ID for Table Cell(td) macro).
Move the element outside the old Rollover macro.
Remove the old Rollover (Depreciated) macro.