您当前位置：首页 > web前端 > htmlcss > CSS实现鼠标滑动显示隐藏层效果

CSS实现鼠标滑动显示隐藏层效果

来源：程序员人生发布时间：2014-01-08 05:43:20 阅读次数：2691次

　　网(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关注

栏目热点