看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css

看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:08:03

原创

1368人浏览过

鼠标停留在上面便有一个新的界面显示出来，移出这个范围便消失了，求指教.

回复讨论(解决方案)

直接把这个网站的代码考下来就可以了啊

用什么实现的...

就是一个下拉啊

就是个js做的类似下拉框又类似标签卡的东西，原理就是一排

，然后给

上面加上一个鼠标悬停事件。原理很简单，但是要做到这种效果就比较麻烦，你可以把他代码考下来自己研究下。

鼠标停留在标签上时，显示一个div，采用absolute定位，div中放入要显示的内容即可。这个效果比较简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{background:#ccc;}ul{margin:0;padding:0;list-style:none;background:#636;width:500px;margin:100px auto;height:30px;}.tab li{float:left;height:30px;line-height:30px; position:relative;}a{text-decoration:none;}.tab li a{color:#ccc;font-size:14px;color:#fff;padding:0 10px;float:left;height:100%;}.tab li a:hover{color:#000;background:#fff;}.tab li div{ position:absolute;width:100px;height:100px;background:#fff;top:30px;left:0; display:none;}</style><script>window.onload=function(){	var oUl=document.getElementById('tab');	var aLi=oUl.getElementsByTagName('li');	for(var i=0;i<aLi.length;i++)	{		aLi[i].onmouseover=function()		{			var oDiv=this.getElementsByTagName('div')[0];			oDiv.style.display='block';		}		aLi[i].onmouseout=function()		{			var oDiv=this.getElementsByTagName('div')[0];			oDiv.style.display='none';		}	}}</script></head><body><ul class="tab"  id="tab">	<li>    	<a href="#">首页        	<div>        		测试内容看看        	</div>        </a>    </li>    <li>    	<a href="#">产品        	<div>        		产品页面        	</div>        </a>    </li></ul></body></html>

登录后复制