鼠标放上放大的纯CSS菜单

2024-09-05 12:19:53

字体：大中小

来源：转载

供稿：网友

这个菜单很特别，个性一点，当鼠标放到菜单的某一项的时候，该项会变大，像一些分页程序的效果一样，没有用到任何脚本，完全是由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><style type="text/css">#container {width:680px; height:230px; padding:20px 0 0 50px; background:url(); border:1px solid #000;}#large {padding:0; margin:0; list-style:none;}#large li {float:left; display:block; margin-right:5px; width:100px; height:25px;}#large li a {display:inline; float:left; width:100px; height:25px; position:absolute; text-align:center; text-decoration:none;}#large li a em {display:block; width:100px; height:25px; background:#874; border:1px solid #fff;}#large li a b {display:block; width:100px; height:25px; background:transparent; color:#dd7; position:absolute; top:0; left:0; line-height:24px;}#large li a:hover {white-space:normal; cursor:pointer; z-index:100;}#large li a:hover em {display:block; width:115px; height:35px; left:7px; top:5px; position:absolute; background:#431; z-index:100; opacity:0.7; border:0}#large li a:hover b {width:110px; height:30px; top:-7px; left:-5px; z-index:200; background:#985; font-size:1.1em; color:#ff9; line-height:29px; border:1px solid #fff;}</style><style type="text/css">#large li a:hover em {filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);}</style></head><body><div id="container"><ul id="large"><li><em></em><b>中文实例</b></li><li><em></em><b>网页特效</b></li><li><em></em><b>最新更新</b></li><li><em></em><b>Goldilocks</b></li><li><em></em><b>Contact</b></li></ul></div></body></html>

上一篇：鼠标滑过变色的菜单条

下一篇：纵向无序的CSS列表菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注