PullDownMenu.htm 和 onMouseOver,onMouseOut的使用

原創

2020-02-21 23:28

在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;
}