A:hover图片预览效果--By:小web

最新推荐文章于 2023-11-03 10:29:29 发布

转载最新推荐文章于 2023-11-03 10:29:29 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/littleweb/archive/2008/12/26/1363327.html

文章标签：

#xhtml

纯CSS实现，无JS、无hack，兼容各大流浏览器！

效果图如下：

效果图图

源码测试：

<!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>CSS examples - A:hover图片预览效果--By:小web</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{ position:relative; } img { border:none; } #room{ width:520px; margin:50px auto; text-align:center;font-size:13px; } #room a{ display:block; width:100px;height:100px; margin:5px;padding:5px; float:left; line-height:25px; border:1px solid gray;background:#ccc; } #room a img{ width:100px;height:100px; } #room a:hover{/*IE6的bug在这个设置中可以消除*/ background:none; color:#0065FF; z-index:1000; } #room a:hover img{ display:block; width:200px;height:200px; margin-left:-100px;padding:2px; position:absolute;left:50%;top:-50px; border:1px solid gray;background:#fff; }</style> </head> <body> <div id="room"> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" alt="星坐" /></a> <a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" alt="星坐" /></a> </div> </body> </html>

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

详细源码：

Code
<!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>CSS examples - A:hover图片预览效果--By:小web</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
*{
    position:relative;
}
img {
    border:none;
}
#room{
    width:520px;
    margin:50px auto;
    text-align:center;font-size:13px;

}
#room a{
    display:block;
    width:100px;height:100px;
    margin:5px;padding:5px;
    float:left;
    line-height:25px;
    border:1px solid gray;background:#ccc;
}
#room a img{
    width:100px;height:100px;
}
#room a:hover{/*IE6的bug在这个设置中可以消除*/
    background:none;
    color:#0065FF;
    z-index:1000;

}
#room a:hover img{
    display:block;
    width:200px;height:200px;
    margin-left:-100px;padding:2px;
    position:absolute;left:50%;top:-50px;
    border:1px solid gray;background:#fff;
}
</style>
</head>

<body>
<div id="room">
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" alt="星坐" /></a>
    <a href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" alt="星坐" /></a>
</div>
</body>

</html>

转载于:https://www.cnblogs.com/littleweb/archive/2008/12/26/1363327.html