How to Link the MouseOver Effect in Chrome CSS

Cascading Style Sheets is a common method, along with Hypertext Markup Language, of formatting webpages. You can use CSS to produce effects when a user hovers the mouse cursor over a link in Google Chrome. By default, the hover tag adopts its attributes from the parent tag, but you can change the CSS so that the link changes in color, font size or other property on mouseover.

Instructions

    • 1

      Insert "<style></style>" in between the "<head></head>" tags.

    • 2

      Insert "a:hover { }" in between the "<style></style>" tags.

    • 3

      Input the desired attributes between the braces, or curly brackets, in the form of "<attribute name>: <value>;". The final format should look similar to the following:

      <style>
      a:hover { color: black; font-family: arial; font-style: normal; text-decoration: none; font-weight: bold; background-color: yellow; font-size: 9px; }
      </style>

Tips & Warnings

  • The most common attributes include "font-family," "font-weight" (which alters the boldness of the text), "font-size," "font-style" (which changes the font to italics), "color," "text-decoration" (which includes values like overline and underline) and "background-color."

Related Searches:

References

Comments

Related Ads

Featured