HTML 鼠标悬浮隐藏部分 习题
css样式表:
@charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; background-color:#00F; top:200px; left:200px; overflow:hidden; position:absolute; } .aa { width:80px; height:40px; background-color:#00F; top:200px; left:200px; position:absolute; } .b { width:80px; height:120px; border:0px solid #999; top:40px; left:0px; position:absolute; } .c { width:80px; height:40px; background-color:#F00; top:0px; left:0px; overflow:hidden; position:absolute; } .c1 { width:80px; height:40px; background-color:#F00; top:0px; left:0px; position:absolute; } .c2 { width:100px; height:160px; background-color:#F00; top:0px; left:80px; position:absolute; } .d { width:80px; height:40px; background-color:#FF0; top:40px; left:0px; overflow:hidden; position:absolute; } .d1 { width:80px; height:40px; background-color:#FF0; top:40px; left:0px; position:absolute; } .d2 { width:100px; height:160px; background-color:#FF0; top:0px; left:80px; position:absolute; } .e { width:80px; height:40px; background-color:#F0F; top:80px; left:0px; overflow:hidden; position:absolute; } .e1 { width:80px; height:40px; background-color:#F0F; top:80px; left:0px; position:absolute; } .e2 { width:100px; height:160px; background-color:#F0F; top:0px; left:80px; position:absolute; }
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="a" onmouseover="className='aa'" onmouseout="className='a'"> <div class="b"> <div class="c" onmouseover="className='c1'" onmouseout="className='c'"> <a href="http://www.baidu.com/" target="_blank"><div class="c2">百度一下</div></a> </div> <div class="d" onmouseover="className='d1'" onmouseout="className='d'"> <div class="d2"></div> </div> <div class="e" onmouseover="className='e1'" onmouseout="className='e'"> <div class="e2"></div> </div> </div> </div> </body> </html>
效果图: