Taobao, JD.com 및 기타 웹페이지에서 마우스를 위로 올리면 그 아래에 다른 옵션이 나타나는 것을 볼 수 있습니다.
주로 CSS의 표시를 사용하며, CSS 스타일 설정과 태그를 추가하여 달성할 수 있는 마우스 트리거 이벤트 onmouseover() 및 onmouseout()도 사용합니다.
세부 내용은 다음과 같습니다.
1. 보다 나은 제어를 위해 리스트 스타일을 채택하였으며, CSS 스타일 설정시 매우 편리합니다
2. 3499910bf9dac5ae3c52d5ede7383485 태그 스타일을 채택하여 마우스를 위로 움직여 다른 태그에 반응할 수 있습니다
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 href="http://www.baidu.com">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.baidu.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://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">社会新闻</a> <ul> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">最新新闻</a> <ul> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》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://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">新浪新闻</a> <ul> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">社会新闻</a> <ul> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> <li onmouseover="open1(this)"; onmouseout="open1(this)"> <a href="javascript:void(0)" onclick="">最新新闻</a> <ul> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li> <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li> </ul> </li> </ul> </div> </body> </html>