纯CSS实现的图片组展示带简介效果(绚丽)_稻草人的精品收藏站—

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]

　　一个电影图标(我觉得叫“海报缩图”不动听)，鼠标滑过时显示它的名称和简介，这样的效果做起来很容易，稍稍利用:hover伪类便可实现。

　　然而这样的图标通常是成组出现的，于是就出现了一个问题：当鼠标滑过时，显示出来的详细信息将遮住其他的图标，从而使得“:hover”无法顺利触发。

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <FCK:meta name="author" content="Chomo" /> <link rel="start" href="http://www.ps800.com" title="Home" /> <title>“:hover”无法顺利触发</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} body { font-size:12px; font-family:constantia,arial,simsun; } .movie a { text-decoration:none; cursor:pointer;} .movie a img { border:0; width:75px; height:100px; vertical-align:top;} .movie { padding:9px; width:225px;} .movie:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} .movie li { float:left; width:75px; height:100px;} .movie a .intro { display:none;} .movie a:hover .intro { display:block;} .movie a:hover { width:100%; color:#000;} .movie a:hover .detail { position:absolute; margin-top:-9px; margin-left:-9px; width:300px; background:#ffc; padding:8px; border:1px solid #000; line-height:1.5; display:block;} .movie a:hover img { float:left; margin-right:5px;} /*--- intro ---*/ .movie .name { font-size:14px; font-weight:bold; display:block;} .movie .p { display:block; text-indent:2em; margin-top:10px;} </style> </head> <body> <ul class="movie"> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/1.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/1.jpg" alt="" /> 殉难者 Martyrs 露西（Mylène Jampanoï 饰）童年时被一神秘组织绑架，在那一年的黑暗岁月里，她饱受折磨。最终她趁守卫不注意逃脱，在孤儿院结识了新的朋友安娜（Morjana Alaoui 饰）。然而露西心灵受到严重创伤，她经常能够看到一个全身赤裸、伤痕累累的恐怖女人对她进行恐吓与追杀。露西就在恐慌与悲痛中度过了童年。 15年后，经过一番追查，露西和安娜查到了当年的行凶者之一。露西将对方一家杀害，却仍无法摆脱童年的梦魇，最终在歇斯底里中自杀身亡。悲伤的安娜很快被那个神秘组织抓到，她将如朋友一样，被迫成为传说中的殉道者…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/2.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/2.jpg" alt="" /> 我是山姆 I Am Sam 在星巴克工作的山姆（西恩•潘 Sean Penn 饰），虽已成人，但智力水平只有7岁。一次偶然，他收留了一个流浪女。该女子帮山姆生下了一个女儿后消失得无影无踪。 他给女儿取名叫露西（达科塔•范宁 Dakota Fanning 饰）,因为他最喜欢甲壳虫乐队的《天空中戴钻石的露西》。他非常疼爱自己的孩子。露西在山姆的细心呵护下慢慢地长大了，她发现爸爸不能看懂稍微复杂一些的故事。她在拒绝长大，希望和爸爸一样。父女两的生活是那么幸福。 地区的教育官员发现了这个特殊的家庭，他们认为山姆没有能力照顾露西，于是把露西带走了。 伤心极了的山姆一心要挣回露西的抚养权，于是他自以为是的去找该地区最好的律师…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/3.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/3.jpg" alt="" /> 浪漫的老鼠/The Tale of Despereaux 故事的主角是一只名叫“德佩罗”（Despereaux）的小老鼠。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/4.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/4.jpg" alt="" /> 怒火中烧 Man on Fire 克雷塞（丹泽尔•华盛顿 Denzel Washington 饰）曾经是一名杀人不眨眼的特种兵，但是退役后的他却常常被自己杀人的梦魇惊醒，无法忍受痛苦的他只好求助于酒精来麻痹自己的神经。好友见长此以往不是办法，遂推荐他到墨西哥去担任一名私人保镖。 墨西哥城平均每分钟就发生60起绑架案，不管你有没有钱，你都可能遭到绑架。克雷塞保护的是一名百万富翁的女儿皮塔（达科塔•范宁 Dakota Fanning 饰）。10岁的平塔活泼可爱，她快乐的心很快就感染了克雷塞，她成了克雷塞生活中的天使。但是，好景不长，皮塔遭到了绑票并被撕票了！克雷塞大受打击，怒火中烧的他决定只身去找绑匪为皮塔报仇。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/5.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/5.jpg" alt="" /> 东邪西毒 在恋人（张曼玉）负气嫁给兄长的当晚，欧阳锋（张国荣）黯然离开白陀山，走进沙漠某个小镇，成为一名杀手中介人。他的朋友、风流剑客黄药师（梁家辉）每年都来小镇与他畅饮，酒话里有关白陀山的消息令他忘却往事的念想渐次演变成自欺行为。 黄药师只是表面风流。他迷恋好友“盲武士”（梁朝伟）的妻子桃花（刘嘉玲），后者在丈夫死后，永远地离开了他；而对迷恋他的女人慕容嫣（林青霞），他又不愿兑现曾经随口说出的承诺，这使得慕容嫣迷失于自己的身份中。与欧阳锋构成短暂“买凶杀人”关系的洪七（张学友）、村姑（杨采妮）等人，也都有一段只有他们自己才知、不愿回首的痛苦过往。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/6.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/6.jpg" alt="" /> 暮光之城 Twilight 被誉为《哈里·波特》之后最受欧美青少年欢迎的畅销小说《暮光之城》第一部改编的电影，于2月17日在美国西北海岸俄勒冈州的波特兰开机。该片女主角贝拉由被媒体推选的好莱坞10大明日之星之一的克里斯汀·斯图尔特担任，男主角爱德华由曾经饰演《哈里·波特与火焰杯》中美少男赛德里克的罗伯特·帕丁森出演。 《暮光之城》讲述了一对苦命鸳鸯的爱情故事。女主角贝拉·斯旺是一位机智甜美、广受欢迎的少女，男主角爱德华·卡伦则是美貌而坚持素食主义的吸血鬼。金发帅气的爱德华实际年龄几百岁了，但身体只是17岁的样子，体能像超人，能够做各种别人办不到的事。贝拉最能吸引他的地方是她身上的特殊香气——他一闻到就想吃她，可又为了爱而拼命压抑自己的食欲，还要和别的同样想吃她的吸血鬼争斗，想尽办法保护她。 在风靡全球的“哈利·波特”系列推出最后一集，故事画上句号后，它在畅销书排行榜上的冠军位置... </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/7.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/7.jpg" alt="" /> 马利与我 Marley & Me 约翰·杰罗甘和珍妮·杰罗甘的新婚之夜，一场大雪不期而至。于是，这对新婚夫妇决定离开密歇根州严寒的冬天，前往南方佛罗里达州的西棕榈海岸开始他们的新生活。来到目的地后，他们在当地有竞争关系的两家报社各自找到了记者的工作，并买下了一套房子，开始了他们的婚后生活，一切都是全新的开始。 由于不确定自己是否已经做好了养育孩子的准备，约翰便向自己的好友——同时也是报社的同事塞巴斯蒂安倾诉此事。塞巴斯蒂安给约翰提出了一个完美的解决办法，那就是约翰应该送珍妮一只小狗，并表示养狗其实很简单，不外乎散散步、喂喂东西、以及时不时把它放出去耍。 黄色拉布拉多犬马利就此进入这个家庭。不知不觉中，杰罗甘夫妇饲养的马利已经从一只可爱的、12磅重小狗长大成了好动的、不安分的、精力充沛的、且重达 100磅的大狗了，因此杰罗甘家遭受到了严重的破坏。它在学校也不服从管教，它的种种劣迹还包括... </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/8.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/8.jpg" alt="" /> 蝴蝶效应3：启示 Butterfly Effect: Revelation sam在一场火灾中失去了妹妹，多年之后意外发现自己有了穿越时空的能力，他不仅利用这个能力帮助警方破案而且他又回到从前救了他妹妹。于是事态的发展是他父母在火灾中丧生了。并且他的女友也惨死锯下。为了知道真相，他不断的穿梭时空想要抓住凶手，却发现有越来越多的人惨死于与她女友同样的方式。他想要抓住凶手的心情越来越急切，终于在一次穿梭时空中他发现了凶手竟然是…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/9.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/9.jpg" alt="" /> 蝴蝶效应2 The Butterfly Effect 2 尼克（Eric Lively 饰）与好友们一起在郊外为女友茱莉（Erica Durance 饰）庆祝生日，但是在返回的路上发生了车祸，茱莉不幸重伤身亡，尼克悲痛万分。 很快一年过去了，有一天尼克发现自己可以通过看老照片的方法重返过去。就这样，他利用自己的超能力改写了历史，让茱莉躲过了灾难。 虽然女友的复活令尼克兴奋异常，但生活的烦恼依旧接踵而至。因为有了之前的经验，尼克不断改变历史，以期生活可以按照自己的思维发展。但结果往往事与愿违，总会出现更大的问题。 尼克会接受命运的安排吗？ </a> </li> </ul> </body> </html>
提示：可修改后代码再运行!

　　要解决这个问题，关键在于如何使得现在被遮住的这个也能触发:hover。能触发:hover吗?不能!不被遮住。的一个子元素不被遮住即可。也能触发:hover。能触发:hover吗?不能!不被遮住。的一个子元素不被遮住即可。

　　要解决这个问题，关键在于如何使得现在被遮住的这个

　　=> 被遮住的

　　=> 那么现在问题转化为：如何使得现在被遮住的这个

　　=> 事实上：

　　=> 加一个透明的子元素便能实现了。

　　思路图(3D的也，透视的也，我真牛 ^-^)：

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <FCK:meta name="author" content="Chomo" /> <link rel="start" href="http://www.ps800.com" title="Home" /> <title>图标组中鼠标经过图标显示详细信息</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { font-size:12px; font-family:constantia,arial,simsun; } .movie a { text-decoration:none; cursor:pointer; } .movie a img { border:0; width:75px; height:100px; vertical-align:top; } .movie a .space { display:block; position:absolute; width:75px; height:100px; z-index:3; background:url(http://www.14px.com/wp-content/uploads/2009/04/space.gif); /*--- background:transparent效果在IE7中不稳定 ---*/ } .movie { padding:9px; width:225px; } .movie:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .movie li { float:left; width:75px; height:100px; } .movie a .intro { display:none; } .movie a:hover .intro { display:block; } .movie a:hover { width:100%; color:#000; } .movie a:hover .space { z-index:1; } .movie a:hover .detail { z-index:2; position:absolute; margin-top:-9px; margin-left:-9px; width:300px; background:url(http://www.14px.com/wp-content/uploads/2009/04/detailBG.png); _background:transparent; _filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaffffcc,endColorstr=#aaffffcc);/*-- ie6不支持半透明的png --*/ padding:8px; border:1px solid #000; line-height:1.5; display:block; } .movie a:hover img { float:left; margin-right:5px; } /*--- intro ---*/ .movie .name { font-size:14px; font-weight:bold; display:block; } .movie .p { display:block; text-indent:2em; } </style> </head> <body> <ul class="movie"> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/1.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/1.jpg" alt="" /> 殉难者 Martyrs 露西（Mylène Jampanoï 饰）童年时被一神秘组织绑架，在那一年的黑暗岁月里，她饱受折磨。最终她趁守卫不注意逃脱，在孤儿院结识了新的朋友安娜（Morjana Alaoui 饰）。然而露西心灵受到严重创伤，她经常能够看到一个全身赤裸、伤痕累累的恐怖女人对她进行恐吓与追杀。露西就在恐慌与悲痛中度过了童年。 15年后，经过一番追查，露西和安娜查到了当年的行凶者之一。露西将对方一家杀害，却仍无法摆脱童年的梦魇，最终在歇斯底里中自杀身亡。悲伤的安娜很快被那个神秘组织抓到，她将如朋友一样，被迫成为传说中的殉道者…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/2.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/2.jpg" alt="" /> 我是山姆 I Am Sam 在星巴克工作的山姆（西恩•潘 Sean Penn 饰），虽已成人，但智力水平只有7岁。一次偶然，他收留了一个流浪女。该女子帮山姆生下了一个女儿后消失得无影无踪。 他给女儿取名叫露西（达科塔•范宁 Dakota Fanning 饰）,因为他最喜欢甲壳虫乐队的《天空中戴钻石的露西》。他非常疼爱自己的孩子。露西在山姆的细心呵护下慢慢地长大了，她发现爸爸不能看懂稍微复杂一些的故事。她在拒绝长大，希望和爸爸一样。父女两的生活是那么幸福。 地区的教育官员发现了这个特殊的家庭，他们认为山姆没有能力照顾露西，于是把露西带走了。 伤心极了的山姆一心要挣回露西的抚养权，于是他自以为是的去找该地区最好的律师…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/3.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/3.jpg" alt="" /> 浪漫的老鼠/The Tale of Despereaux 故事的主角是一只名叫“德佩罗”（Despereaux）的小老鼠。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/4.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/4.jpg" alt="" /> 怒火中烧 Man on Fire 克雷塞（丹泽尔•华盛顿 Denzel Washington 饰）曾经是一名杀人不眨眼的特种兵，但是退役后的他却常常被自己杀人的梦魇惊醒，无法忍受痛苦的他只好求助于酒精来麻痹自己的神经。好友见长此以往不是办法，遂推荐他到墨西哥去担任一名私人保镖。 墨西哥城平均每分钟就发生60起绑架案，不管你有没有钱，你都可能遭到绑架。克雷塞保护的是一名百万富翁的女儿皮塔（达科塔•范宁 Dakota Fanning 饰）。10岁的平塔活泼可爱，她快乐的心很快就感染了克雷塞，她成了克雷塞生活中的天使。但是，好景不长，皮塔遭到了绑票并被撕票了！克雷塞大受打击，怒火中烧的他决定只身去找绑匪为皮塔报仇。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/5.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/5.jpg" alt="" /> 东邪西毒 在恋人（张曼玉）负气嫁给兄长的当晚，欧阳锋（张国荣）黯然离开白陀山，走进沙漠某个小镇，成为一名杀手中介人。他的朋友、风流剑客黄药师（梁家辉）每年都来小镇与他畅饮，酒话里有关白陀山的消息令他忘却往事的念想渐次演变成自欺行为。 黄药师只是表面风流。他迷恋好友“盲武士”（梁朝伟）的妻子桃花（刘嘉玲），后者在丈夫死后，永远地离开了他；而对迷恋他的女人慕容嫣（林青霞），他又不愿兑现曾经随口说出的承诺，这使得慕容嫣迷失于自己的身份中。与欧阳锋构成短暂“买凶杀人”关系的洪七（张学友）、村姑（杨采妮）等人，也都有一段只有他们自己才知、不愿回首的痛苦过往。 </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/6.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/6.jpg" alt="" /> 暮光之城 Twilight 被誉为《哈里·波特》之后最受欧美青少年欢迎的畅销小说《暮光之城》第一部改编的电影，于2月17日在美国西北海岸俄勒冈州的波特兰开机。该片女主角贝拉由被媒体推选的好莱坞10大明日之星之一的克里斯汀·斯图尔特担任，男主角爱德华由曾经饰演《哈里·波特与火焰杯》中美少男赛德里克的罗伯特·帕丁森出演。 《暮光之城》讲述了一对苦命鸳鸯的爱情故事。女主角贝拉·斯旺是一位机智甜美、广受欢迎的少女，男主角爱德华·卡伦则是美貌而坚持素食主义的吸血鬼。金发帅气的爱德华实际年龄几百岁了，但身体只是17岁的样子，体能像超人，能够做各种别人办不到的事。贝拉最能吸引他的地方是她身上的特殊香气——他一闻到就想吃她，可又为了爱而拼命压抑自己的食欲，还要和别的同样想吃她的吸血鬼争斗，想尽办法保护她。 在风靡全球的“哈利·波特”系列推出最后一集，故事画上句号后，它在畅销书排行榜上的冠军位置... </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/7.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/7.jpg" alt="" /> 马利与我 Marley & Me 约翰·杰罗甘和珍妮·杰罗甘的新婚之夜，一场大雪不期而至。于是，这对新婚夫妇决定离开密歇根州严寒的冬天，前往南方佛罗里达州的西棕榈海岸开始他们的新生活。来到目的地后，他们在当地有竞争关系的两家报社各自找到了记者的工作，并买下了一套房子，开始了他们的婚后生活，一切都是全新的开始。 由于不确定自己是否已经做好了养育孩子的准备，约翰便向自己的好友——同时也是报社的同事塞巴斯蒂安倾诉此事。塞巴斯蒂安给约翰提出了一个完美的解决办法，那就是约翰应该送珍妮一只小狗，并表示养狗其实很简单，不外乎散散步、喂喂东西、以及时不时把它放出去耍。 黄色拉布拉多犬马利就此进入这个家庭。不知不觉中，杰罗甘夫妇饲养的马利已经从一只可爱的、12磅重小狗长大成了好动的、不安分的、精力充沛的、且重达 100磅的大狗了，因此杰罗甘家遭受到了严重的破坏。它在学校也不服从管教，它的种种劣迹还包括... </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/8.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/8.jpg" alt="" /> 蝴蝶效应3：启示 Butterfly Effect: Revelation sam在一场火灾中失去了妹妹，多年之后意外发现自己有了穿越时空的能力，他不仅利用这个能力帮助警方破案而且他又回到从前救了他妹妹。于是事态的发展是他父母在火灾中丧生了。并且他的女友也惨死锯下。为了知道真相，他不断的穿梭时空想要抓住凶手，却发现有越来越多的人惨死于与她女友同样的方式。他想要抓住凶手的心情越来越急切，终于在一次穿梭时空中他发现了凶手竟然是…… </a> </li> <li> <a href="#nogo" _fcksavedurl="#nogo"> <img src="http://www.14px.com/wp-content/uploads/2009/04/9.jpg" _fcksavedurl="http://www.14px.com/wp-content/uploads/2009/04/9.jpg" alt="" /> 蝴蝶效应2 The Butterfly Effect 2 尼克（Eric Lively 饰）与好友们一起在郊外为女友茱莉（Erica Durance 饰）庆祝生日，但是在返回的路上发生了车祸，茱莉不幸重伤身亡，尼克悲痛万分。 很快一年过去了，有一天尼克发现自己可以通过看老照片的方法重返过去。就这样，他利用自己的超能力改写了历史，让茱莉躲过了灾难。 虽然女友的复活令尼克兴奋异常，但生活的烦恼依旧接踵而至。因为有了之前的经验，尼克不断改变历史，以期生活可以按照自己的思维发展。但结果往往事与愿违，总会出现更大的问题。 尼克会接受命运的安排吗？ </a> </li> </ul> </body> </html>
提示：可修改后代码再运行!

这是一个比较复杂的效果，在兼容性上还是存在一些问题，所以需要作情处理，其细节请参见demo中样式表的注释。

(责任编辑：admin)

稻草人的精品收藏站——致力于平面设计与页面工

基础技法

图像处理

职业技法

相关下载

前端设计

jQuery专栏

站长素材

在线工具

CMS模板

博客模板

网页模板

其他模板

搜索

热门标签

纯CSS实现的图片组展示带简介效果(绚丽)