How to Hide a Hyperlink on Mouseover

Manage your hyperlink display using CSS.

HTML hyperlinks direct your website users to other Internet locations via a click. Hyperlinks are by default displayed with a purple color that does not change on mouseover. CSS incorporates various styles that you can apply to your hyperlinks, including overriding the color definition of the link on mouseover. Hide a hyperlink by setting the Hover color style to the same color as your Web page background.

Instructions

1. Launch your editor and open the Web page.

2. Type the hyperlink Hover code above </head> to override the normal behavior for all links in the page:

   <style type="text/css">

   a:hover{ color: white;}

   </style>

   This code hides your links on hover for a white background. If you have another color background, such as "#99CC00" for lime green, change the value "white" to "#99CC00" accordingly.

3. Save the Web page. Open your Web browser and navigate to your page to test the hyperlinks.

Resources

• W3Schools.com: HTML Links