How to Troubleshoot a CSS Rollover
Cascading Style Sheets, or CSS, is ideal for making rollovers because it uses less code than traditional languages, such as JavaScript, and works in all major browsers. However, your rollover style rules may sometimes lack essential attributes or have mistyped syntax that makes the rollover images and text not appear right. Take a look at your code to troubleshoot your CSS and fix common mistakes in order to make your rollover display just right.
Other People Are Reading
Instructions
-
-
1
Launch a text editor program and open the document that contains your CSS rollover code.
-
2
Check the CSS style that contains the URL address for your rollover image to see why it is not appearing. Make sure the address is entered correctly -- for instance, "images/rollover.gif" instead of "rollover.gif." Make sure the CSS syntax is entered appropriately, as in the following example:
#rollover { background-image:url ('images/rollover.gif'); }
-
-
3
Verify you have the display attribute assigned to "block" so that the rollover text does not appear with an unintended indentation. For example:
#rollover { display: block; }
-
4
Look at the width and height attributes in your style to make sure the rollover dimensions display as you wish. For example:
#rollover { width: 105px; height: 20px; }
-
5
Make sure you have a separate hover style rule to ensure something happens when the viewer positions his mouse over the rollover. Common attributes include styles for background positioning or color. Enter the name of your rollover rule, such as "#rollover," and follow this with ":hover" like so:
#rollover:hover { enter your attributes here }
-
6
Review your HTML code to make sure the designated rollover content has the CSS ID assigned, which applies the style rules. Do this by making sure "id=" followed by the CSS style rule name is in the opening tag, like in this example:
<a id="rollover" href="URL address">Rollover Text</a>
-
7
Save your document and preview it in your Web browser to make sure your rollover works.
-
8
Upload your file to your Web host to publish your fixes.
-
1
Tips & Warnings
A rollover is an image that swaps its picture when a visitor hovers her mouse over it to let her know to click this feature. The initial image of the rollover is known as the "resting" state, and the picture it changes to is the "hover" state.
A common method for creating CSS rollover images is to make the resting and hover pictures in a single GIF image. Layer the hover state below the resting state so they appear one on top of each other.
References
Resources
- Photo Credit Creatas Images/Creatas/Getty Images
