Heim >Web-Frontend >HTML-Tutorial >看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose
看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:031218Durchsuche
鼠标停留在上面便有一个新的界面显示出来，移出这个范围便消失了，求指教.
回复讨论(解决方案)
直接把这个网站的代码考下来就可以了啊
用什么实现的...
就是一个下拉啊
就是个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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一个关于a:hover的问题_html/css_WEB-ITnoseNächster Artikel：在<frameset>或者<iframe>放淘宝客链接，在IE6中不能显示链接中的内容_html/css_WEB-ITnose