Rumah >hujung hadapan web >html tutorial >看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose
看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:08:031217semak imbas
鼠标停留在上面便有一个新的界面显示出来，移出这个范围便消失了，求指教.
回复讨论(解决方案)
直接把这个网站的代码考下来就可以了啊
用什么实现的...
就是一个下拉啊
就是个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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：一个关于a:hover的问题_html/css_WEB-ITnoseArtikel seterusnya：在<frameset>或者<iframe>放淘宝客链接，在IE6中不能显示链接中的内容_html/css_WEB-ITnose