首页 > web前端 > html教程 > 怎么实现网页弹出界面的功能_html/css_WEB-ITnose

怎么实现网页弹出界面的功能_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:15:24
原创
1133 人浏览过

本帖最后由 yr1992 于 2012-10-04 10:47:23 编辑

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板