在淘寶，京東等其他網頁上我們能夠看到，當鼠標移上去的時候，能夠使其下面出現其它選項，現在就演示一下這種功能
主要是用到css里面的display，以及鼠標觸發的事件onmouseover（），和onmouseout()方式，在加上css樣式的設置和標簽之間額使用就能實現。
具體如下：
1，為了很好的控制，采用了列表的樣式，并且在設置css樣式時很方便
2，采用了<a>標簽的樣式，能夠讓鼠標移上去對其他的有反應
具體的js函數寫的功能：
<script type="text/javascript"> function open1(node){ var node1=node; var nodes=node1.getElementsByTagName("ul")[0]; with(nodes.style){ display= (display=="block")? "none" : "block"; } } </script> html部分的代碼：
<div id="news"> <ul id="newsid1"> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <!--<a href="javascript:void(0)" onmouseover="open1(this)"; onmouseout="open1(this)" >最新新聞</a> 在這里，移動第一個之后就會消失，不能夠點擊下面的--> <a href="javascript:void(0)">最新新聞</a> <ul><!--這樣包裝為了能更好的封裝下面的內容，到時候鼠標移動上面，就能對下面的這個操作了--> <li><a >最新新聞內容摘要《機密》1</a></li> <li><a >最新新聞內容摘要《機密》2</a></li> <li><a >最新新聞內容摘要《機密》3</a></li> <li><a >最新新聞內容摘要《機密》4</a></li> <li><a >最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">新浪新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">社會新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">最新新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li></ul></div>
除了上面很重要css的設置也很重要，如下：
<style type="text/css"> #newsid1 { list-style:none; } #newsid1 li ul{ list-style:none; margin:0px; padding:0px; } #newsid1 li{ float:left;/*讓其并排顯示*/ width:220px; text-align:center; background-color:#80ff00; /*設置寬度，讓每一列平均顯示*/ } #newsid1 li a{ color:#8080ff; text-decoration:none;/*讓超鏈接下面沒有橫線*/ text-align:center; line-height:30px; } #newsid1 li a:hover{ /*a:hover移上去有反應設置的具體的顏色和背景顏色 */ color:#400080; background-color:#ffffff; } #newsid1 li ul li{ line-height:30px; color:#ff8040; background-color:#808000;; } #newsid1 li ul{ display:none;/*默認的必須全部隱藏，然后在鼠標移上去觸發時間之后設置 dispaly:block; */ } </style> 效果圖 1：鼠標沒有移上去時候
效果圖 2 ：
完整代碼：
<!DOCTYPE html> <html> <head> <!--主要目的 當鼠標滑過文字時候出現其他文字顯示 采用<ul>和<li><a href="標題"><ul><li>隱藏的內容 采用大量的css模型進行修飾 傳入this對象 function open1(node){ var node1=node; var nodes=node1.getElementsByTagName("ul")[0]; with(nodes.style){ display= (display=="block")? "none" : "block"; } } --> <title>Menufloat.html</title> <style type="text/css"> #newsid1 { list-style:none; } #newsid1 li ul{ list-style:none; margin:0px; padding:0px; } #newsid1 li{ float:left;/*讓其并排顯示*/ width:220px; text-align:center; background-color:#80ff00; /*設置寬度，讓每一列平均顯示*/ } #newsid1 li a{ color:#8080ff; text-decoration:none;/*讓超鏈接下面沒有橫線*/ text-align:center; line-height:30px; } #newsid1 li a:hover{ /*a:hover移上去有反應設置的具體的顏色和背景顏色 */ color:#400080; background-color:#ffffff; } #newsid1 li ul li{ line-height:30px; color:#ff8040; background-color:#808000;; } #newsid1 li ul{ display:none;/*默認的必須全部隱藏，然后在鼠標移上去觸發時間之后設置 dispaly:block; */ } </style> <script type="text/javascript"> function open1(node){ var node1=node; var nodes=node1.getElementsByTagName("ul")[0]; with(nodes.style){ display= (display=="block")? "none" : "block"; } } </script> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <div id="news"> <ul id="newsid1"> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <!--<a href="javascript:void(0)" onmouseover="open1(this)"; onmouseout="open1(this)" >最新新聞</a> 在這里，移動第一個之后就會消失，不能夠點擊下面的--> <a href="javascript:void(0)">最新新聞</a> <ul><!--這樣包裝為了能更好的封裝下面的內容，到時候鼠標移動上面，就能對下面的這個操作了--> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">新浪新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">社會新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">最新新聞</a> <ul> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》1</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》2</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》3</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》4</a></li> <li><a href="http://m.survivalescaperooms.com">最新新聞內容摘要《機密》5</a></li> </ul> </li> </ul> </div> </body> </html> 新聞熱點
疑難解答
