简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

I saw a webpage effect, but I don't know how to achieve it. Please give me some advice_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:08:03
Original
1195 people have browsed it


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

  • , and then add a mouse hover event to the
  • . 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>
    Copy after login

    • Related labels：
    看到一个网页效果，但不知道是如何实现的，请前辈们指教
    source：php.cn
    Previous article：A question about a:hover_html/css_WEB-ITnose Next article：Put Taobao customer link in or