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)

Categories: Blog


Wayne Miles · August 4, 2014 at 7:50 AM

Thanks Chris,

Your code worked perfectly! You can see it in action at the link provided.


Blaine DeYoung · May 8, 2019 at 2:33 PM

Thanks, man! I have searched and searched for a way to do that.

Leave a Reply

Your email address will not be published. Required fields are marked *