Sometimes you may not have the luxury of having javascript to do some of the great things that it can do, like showing hidden content on the screen when you hover over a HTML element (like a A HTML tag for example). In CSS you can achieve a similar result with using some of the overflow and styling elements of un/ordered lists to accomplish a similar result.
If you save this code as codingfriends_showhide.html and then open it up in Firefox or your browser of choice (not sure if it will work in IE6 shall have to check it !). and then just hover over the block and it will display the hidden message 🙂
CSS - show/hide on hover
In essence the main parts of the code are as follows, you need to set the unordered list to have a list style of none with the list elements (li) having a display of being inline (which means that there is no breaks between the elements).
#showhideblock {
list-style:none;
...
#showhideblock li {
display:inline;
with this in place you can use the size of show and hide elements with also the overflow set to hidden (when you hover over the block you need to set the shown element overflow to hidden and set the size of the hidden element so that it shows)
#showhideblock li .hide {
color : black;
height: 0; /* hide the .hide element */
overflow: hidden;
And once you have saved the above file and opened up in your browser of choice when you now hover over the “Hover over me” text you will see the hidden text instead.