怎么实现网页弹出界面的功能_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:15:241140浏览
最近刚开始学网页设计 想用dreamweaver cs5实现一个功能：当鼠标停在“首页两个字上面的时候”，弹出窗口 里面有各个类目,如 针织衫 T恤等 ，移开鼠标之后窗口消失
会的朋友帮忙讲解下 本人在此谢过啦
回复讨论(解决方案)
用js注册鼠标事件，移动的时候显示div层，移出时不显示div层！
鼠标移入 onmouseenter时 显示一个层，鼠标移出 onmouseleave时 隐藏这个层。
再往下就没法讲解了，这就象数学题里的1、2、3一样，再往下分就是小数，反而更麻烦了。
楼主还是找些资料学一下吧。不学不足以论道，不学也不足以闻道。
用JS弄比较好，要是用:hover属性，IE6不支持
用JS吧
<!doctype html><html><body><div id='box' onMouseover="showDiv(true)" onMouseout="showDiv(false)"><input type=button value="TEST" /></div><div id="hiddenBox" style="width:200px;height:200px;background:#ABC;display:none;"><p>This is the content.</p></div><script>var obj = document.getElementById("hiddenBox");function showDiv(b){if(true==b){//showobj.style.display="block"}else{obj.style.display="none"}}</script></body></html> 楼主，按照你的要求粗略的写了下，不知是否你想要的结果，如下：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <script> window.onload = function(){ document.getElementById("test").onmouseover = function(){ document.getElementById("liebiao").style.display = "block"; } document.getElementById("test").onmouseout = function(){ document.getElementById("liebiao").style.display = "none"; } document.getElementById("liebiao").onmouseover = function(){ document.getElementById("liebiao").style.display = "block"; } document.getElementById("liebiao").onmouseout = function(){ document.getElementById("liebiao").style.display = "none"; } } </script> <style> .manContent{ position: absolute; top: 10px; left: 200px; width: 100px; padding: 5px; cursor: pointer; border: 1px solid red; text-align: center; } .manContent:hover{ background-color: #C0C0C0; } .funcContent{ position: absolute; top: 40px; left: 200px; width: 110px; display: none; border: 1px solid red; } ul{ margin: 0; padding: 0; } ul li{ list-style: none; padding: 4px; } ul li a{ text-decoration: none; color: #000; } ul li:hover{ background-color: blue; cursor: pointer; } </style> </head> <body> <div id="test" class="manContent" >首页</div> <div id="liebiao" class="funcContent" > <ul> <li><a href="#">针织衣</a></li> <li><a href="#">T恤</a></li> <li><a href="#">羊毛衫</a></li> </ul> </div> </body></html> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn