网页中实用的放大效果-平面设计-菜鸟图库

网页中实用的放大效果

2022-01-31
来源/作者： onegreen.org / 佚名
9 次浏览

网页中实用的放大效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>a</title> <style type="text/css"> ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow2 li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head> <body> <ul id="hovershow2"> <li><a href="1#" title="test">1</a></li> <li><a href="2#" title="test">2</a></li> <li><a href="3#" title="test">3</a></li> <li><a href="4#" title="test">4</a></li> <li><a href="5#" title="test">5</a></li> <li><a href="6#" title="test">6</a></li> <li><a href="7#" title="test">7</a></li> </ul> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

网页中实用的放大效果

更多精彩内容