How to create a simple hyperlink rollover in Internet Explorer (Beginners)

Internet Explorer was the first browser to implement stylesheet rollovers for hyperlinks.
So, how does it work?

First you create a stylesheet in the header section of your web page. 
<head>
  <title>Rollover sample</test>
  <style>
  a:hover {
    color:red;
  }
  </style>
</head>
As you can see, it doesn't take much to add the code into the stylesheet. This will automatically make all hyperlinks turn red when the mouse hovers over the link - why not try it.

And it's as simple as that. You can do a lot more than just change the colour however. You can change the font size by adding font-size:16pt (see this link) or simply make it bold by adding font-weight:bold (see this link). Watch how the layout changes on the page - you may want to take that into consideration when you add this to your site.

A final example is a bit more complicated but produces effective results. You can use the stylesheet to hide/show the underline when off/over the link.
<head>
  <title>Rollover sample</test>
  <style>
  a {
	text-decoration:none;
  }
  a:hover {
    color:red;
	text-decoration:underline;
  }
  </style>
</head>

And an example: see this link. It works by overriding the default appearance of the hyperlink tag, removing the underline as default. When you hover over the link the hover style restored the link.

If you find this article useful or wish to submit an article, leave a message in the forum.