Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #div1
- #div2
- #div3
- <div style="width: 80px; height: 20px; background-color: red;"
- onmouseover="document.getElementById('div1').style.display = 'block';">
- <div id="div1" style="display: none;">Text</div>
- </div>
- onmouseout="document.getElementById('div1').style.display = 'none';"
- <style type="text/css">
- #div1, #div2, #div3 {
- visibility: hidden;
- }
- </style>
- <script>
- function show(id) {
- document.getElementById(id).style.visibility = "visible";
- }
- function hide(id) {
- document.getElementById(id).style.visibility = "hidden";
- }
- </script>
- <div onMouseOver="show('div1')" onMouseOut="hide('div1')">
- <div id="div1">Div 1 Content</div>
- </div>
- <div onMouseOver="show('div2')" onMouseOut="hide('div2')">
- <div id="div2">Div 2 Content</div>
- </div>
- <div onMouseOver="show('div3')" onMouseOut="hide('div3')">
- <div id="div3">Div 3 Content</div>
- </div>
- <!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>The Divs Case</title>
- <style type="text/css">
- * {margin:0px auto;
- padding:0px;}
- .container {width:800px;
- height:600px;
- background:#FFC;
- border:solid #F3F3F3 1px;}
- .div01 {float:right;
- background:#000;
- height:200px;
- width:200px;
- display:none;}
- .div02 {float:right;
- background:#FF0;
- height:150px;
- width:150px;
- display:none;}
- .div03 {float:right;
- background:#FFF;
- height:100px;
- width:100px;
- display:none;}
- div.container:hover div.div01 {display:block;}
- div.container div.div01:hover div.div02 {display:block;}
- div.container div.div01 div.div02:hover div.div03 {display:block;}
- </style>
- </head>
- <body>
- <div class="container">
- <div class="div01">
- <div class="div02">
- <div class="div03">
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
- <style type="text/css">
- #div1, #div2, #div3{
- display:none;
- }
- #div1:hover, #div2:hover, #div3:hover{
- display:block;
- }
- </style>
- <style type="text/css">
- div{
- display:none;
- }
- div:hover{
- display:block;
- }
- </style>
- div {
- opacity: 0;
- }
- div:hover {
- opacity: 1;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement