CSS – Change Content On Hover

Today I saw a question about changing content without necessarily using JavaScript to do so. Recently I have had to do a little bit more with CSS and think of more solutions with JS. Thusly I came up with a somewhat elegant solution to replacing content on hover without JS:
JS Bin

This example basically shows that when you move your mouse over either the image or the text, another image or text takes its place. This works in all modern browsers and even IE. The downside is that in order to make sure that it will always work in older versions of IE, you need to have the .hoverable element be an A (anchor) tag. Please let me know if you have a better solution! 8)