看到一个网页效果，但不知道是如何实现的，请前辈们指教_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 12:08:031218검색
鼠标停留在上面便有一个新的界面显示出来，移出这个范围便消失了，求指教.
回复讨论(解决方案)
直接把这个网站的代码考下来就可以了啊
用什么实现的...
就是一个下拉啊
就是个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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.