您的位置：首页 > 其它

PullDownMenu.htm 和 onMouseOver,onMouseOut的使用

2015-04-08 15:45 435 查看

在IE中onmouseover, onmouseout对这两个样式的支持不完全。默认只支持 <a> 标签的。而实际上 WEB 标准里面，应该对所有元素都支持。

可以将onmouseover, onmouseout看成JScript代码，负责处理所有的CSS格式，根据定制的CSS格式，生成onMouseOver和onMouseOut事件，实现了hover的组件化。
实例：

-----------------PullDownMenu.html--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PullDownMenu</title>
<link href="PullDownMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul>
<li class="menu2"  onMouseOver="this.className='menu1'"  onMouseOut="this.className='menu2'">我的首页
<div class="list">
<a href="#">我爱CSS</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
<a href="#">平面设计</a><br />
<a href="#">编程开发</a><br />
<a href="#">三维动画</a><br />
<a href="#">网页制作</a><br />
<a href="#">Flash动画</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的应用
<div class="list">
<a href="#">小游戏</a><br />
<a href="#">聊天室</a><br />
<a href="#">新闻视频</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
<a href="#">电脑报价</a><br />
<a href="#">电脑攒机</a><br />
<a href="#">攒机方案</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>

-----------------PullDownMenu.css--------------------

@CHARSET "UTF-8";
* {
padding: 0;
margin: 0;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
left: 198px;
top: 25px;
}
ul {
list-style:none;
}
li{
float:left;
display:inline;
list-style-position:outside;  /*列表项位于文本以外（默认值）*/
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:#ffffff;
text-decoration:none;
float:left;
padding:3px 3px 0px 20px;
width:88px;
background-color:#539D26;
}
a:active{
color:#ffffff;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}

.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
padding:6px 0px 0px 0px;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;

cursor:pointer;
overflow-y:hidden;  /* 垂直溢出 */

filter:Alpha(opacity=70);    /* 透明度 */
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
padding:6px 0px 0px 0px;
margin:6px 4px 0px 0px;
border:1px solid #EEE8DD;
background-color:#F5F5F5;
color:#999999;

overflow-y:hidden;  /* 垂直溢出 */
cursor:pointer;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航