您當前位置：首頁 > web前端 > htmlcss > CSS實現鼠標滑動顯示隱藏層效果

CSS實現鼠標滑動顯示隱藏層效果

來源：程序員人生發布時間：2014-01-08 05:43:20 閱讀次數：2877次

　　網(LieHuo.Net)教程 昨日有位朋友向網小編請教一個CSS的問題，其實也不是很難的，由于昨天工作太忙，就沒有回復他，今天早上來的早，跟MM聊了一下業務上事的，時間有了，趕緊把昨天朋友的事情辦了，以免這小子說我重色輕友。哈哈，說主題，他的問題是——怎么用CSS來實現鼠標滑動顯示隱藏層效果，下面直接看實例代碼：

<!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=gb2312" /><title>用CSS實現層鼠標滑動隱藏效果 - 網 - 關注站長,關注互聯網!</title><meta name="description" content="是全球中文互聯網資訊與教程的提供者，多年來一直堅持為互聯網發展提供動力，熱情、積極、向上、不斷進取是Liehuo.Net所提倡的品格！" /><meta name="keywords" content="建站,站長,建站資訊,中國站長,網站建設,網站開發,網頁和平面設計,web標準,個人網站,SEO,網站推廣,HTML,CSS,xhtml,css,Dreamweaver,Fireworks,Flash,Asp,Php,Jsp,ASP.NET,iis,Apache,Photoshop,Access,MySQL,SQL server,JavaScript" /><meta http-equiv="X-UA-Compatible" content="IE=7"><meta content="Copyright 2009 liehuo.net" name="copyright" /><body><table width="200" border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#99FFFF" onmouseover="document.all.Layer1.style.visibility='visible'" onmouseout="document.all.Layer1.style.visibility='hidden'"> 顯示</td><td bgcolor="#0066FF" onmouseover="document.all.Layer1.style.visibility='hidden'">隱藏</td></tr></table><input type="button" name="button" id="button" value="按鈕" onclick="document.all.Layer1.style.visibility='visible'" /><p> </p><div id="Layer1" style="visibility:hidden; width:400px; height:300px; background-color:#99CCFF;x"></body></html>
提示：可修改后代碼再運行!

　　好了，終于寫完了，這是偶參照網上一位朋友的例子寫的，大家一起學習一下，如果有哪個地方不對，歡迎提出意見哦。一會趕緊發給朋友去。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 2009年，淺談草根站長的出路在哪里？

下一篇 64位Ubuntu無法安裝32位兼容庫的解決辦法

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS實現鼠標滑動顯示隱藏層效果