Solution: get IE6 to apply image border styles on hover

← 1 | 2 | 3 →

Here's the same image again:

How come it now does work in Internet Explorer 6 as well as in the other browsers?

The solution is quite simple — IE6[1] needs a trigger. The trigger is in the form of a hover effect on the link itself, not the image inside.

I've added the following style to the styles for this page: 

	a:hover{
		color:red;
	}

This one simple rule, causing a change of colour on the link itself, triggers IE to also apply hover styles for elements inside of it — simple, isn't it?

The entire code needed for the image border to change style and colour on hover: 

	a:hover{
		color:red;
	}
	a:link img,
	a:visited img{
		border:5px solid green;
	}
	a:focus img,
	a:hover img,
	a:active img{
		border:5px dashed red;
	}

However, since changing the colour for a:hover is not always the most practical solution, let's have a look at a couple more options to trick IE into applying styles to linked images.

[1] Internet Explorer 5 has the same problem, and can use the same solution, as IE6. This bug was solved in IE7's beta version.