<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body { margin: 0px; } .outer { margin: -100px; width: 400px; height: 500px; background-color: yellow; } .outer:hover { background-color: red; } .inner { visibility: hidden; width: 100%; height: 50%; background-color: cyan; } </style> </head> <body> <div class="outer" onmouseover="firstChild.style.visibility='visible'" onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div> </body> </html>