宜家风格灯箱
这是宜家产品的产品清单。 当用户将鼠标hover在某个产品上时，会触发一个灯箱并且该部分会水平展开：
http://www.ikea.com/my/en/catalog/categories/departments/eating/16043/
这里使用的Lightbox是什么？ 或者可以操纵哪个Lightbox来实现这一目标？ 谢谢。
由于我们生活在未来，你可以很容易地使用CSS单独实现这种效果。
这是一个简单的例子。 首先是不起眼的标记：
- 1
- 2
- 3
现在，风格（我不会解释，但我试着保持良好的评论）：
.Menu {list-style:none; margin: 1em 1em} .Menu > li { float:left; text-align:center; padding: 15px 30px; /* size of the box */ width: 50px; height: 30px; overflow:hidden; /* fixed size */ border:solid 1px silver; background-color:white; /* boxes are over each other when hovered */ /* z-index is needed so hovered boxes are in front of other boxes */ position:relative; z-index:100; /* showing off. Not for IE. */ transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; } .Menu > li:hover { padding: 20px 35px 35px; /* larger */ /* keep other boxes on same position (this is the real trick here) */ margin: -5px -5px -20px; /* math! this + new padding = old padding */ z-index:110; /* in front of other boxes */ /* special effects: */ border-color: #777; box-shadow: 0 0 5px 0px rgba(0,0,0,0.6); border-radius:3px; }
这是真的。 我还添加了仅在hover时可见的元素：
.VisibleOnHover {visibility:hidden;opacity:0; background-color:#ff6; border:solid 1px #994; padding:2px 4px; margin: 2px; position:absolute; font-size:small; transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; } .Menu > :hover > .VisibleOnHover {visibility:visible;opacity:1;} .VisibleOnHover.Bottom {bottom:0;left:0;right:0;} .VisibleOnHover.TopLeft {top:0;right:0;}
你可以在jsFiddle上看到一个完整的例子： http ： //jsfiddle.net/kobi/sqfAS/
边界有一些小问题（它们在元素之间加倍 – 你甚至可以用-1边距加倍）和IE9，它仍然不支持transition – 但弹出窗口仍然可以工作。 另一个可用性/可访问性问题是菜单不能使用Tab （在我的辩护中，宜家也不起作用……）