最近刚开始学网页设计 想用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>