Rollover change image for text in CSS

Using CSS/HTML alone I came up with this:

Code: 
<html>
<head>
<style type="text/css">
	.container {border: 2px solid black; width:100px; height:100px}
	.outerlink { display:block; width:100px }
	.outerlink .text{display:none}
	.outerlink .image{display:block}
	.outerlink:hover .text{display:block}
	.outerlink:hover .image{display:none}
</style>
</head>
<body>
<a href="#" class="outerlink"/>
	<div class="container">
		<div class="text">Lorem ipsum... etc.</div>
		<img src="lol.jpg" height="100px" width="100px" class="image"/>
	</div>
</a>
</body>
</html>

So you'd have an element with a class "container" (a div) which contains both a "txt" element (which would probably be a div) and an "image" element (img tag). Then depending on what you're hovering over, either one or the other is hidden.

Then everything is contained with in an anchor, which is told to behave like a block level element; this is just to keep Internet Explorer happy (it doesn't like the :hover pseudo-class on anything other than anchors). To be honest, you could probably do away with the "container" element completely, but this seems to work as far as I can tell. Works in Chrome and IE, haven't tested in anything else.

If JQuery is an option, that would probably produce a nicer/more reliable result.

Edit: Oh also you might want to do something about the formatting of the text and the cursor going all hand-y because of the anchor. Whatever floats your boat I guess.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom