Home >Web Front-end >HTML Tutorial >I saw a webpage effect, but I don't know how to achieve it. Please give me some advice_html/css_WEB-ITnose
I saw a webpage effect, but I don't know how to achieve it. Please give me some advice_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:08:031298browse
A new interface will be displayed when the mouse stays on it. If you move out of this range, it will disappear. Please give me some advice.
Reply to the discussion (solution)
Just download the code of this website and you’ll be done.
What is it used to implement...
It’s just a drop-down.
It’s something similar made with js. The drop-down box is similar to a tab card. The principle is to line up a row of 25edfb22a4f469ecb59f1190150159c6, and then add a mouse hover event to the 25edfb22a4f469ecb59f1190150159c6. The principle is very simple, but it is more troublesome to achieve this effect. You can test his code and study it yourself.
When the mouse stays on the label, a div is displayed. Use absolute positioning and put the content to be displayed in the div. This effect is relatively simple
<!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>