DOM Practice Examples II
The two <div> blocks below are intended as previews, to appear only when the mouse moves over the corresponding link (and to disappear when it moves out). To make this happen, you will need to modify this page in several ways.
- Using CSS, adjust the margins so that the main text takes up only the left half of the screen. Likewise, make the two previews occupy only the right half of the screen, with a width of 40% and centered text.
- Change the preview blocks' position to absolute, with a top of 18px (pixels). They should now appear on top of one another to the right of the main text.
- Change the preview blocks' visibility to hidden. The space to the right of the main text should now be empty.
- Add Javascript commands to the links below so that the appropriate preview becomes visible when the mouse moves over it, and invisible when the mouse moves out. Can you do this using only two functions?
