使用CSS，当鼠标移过它们时，如何创建更大的元素？

Question

看到的效果是，当鼠标悬停在它们上方时，框的大小会增加，并且也会有投影。

当鼠标不在框上时，它们会回到相同的大小，并且没有阴影。

正常：

鼠标悬停：

滚动在框中看到效果here。

Answer 1

jsFiddle DEMO

鼠标悬停的元素，使他们大可以以多种方式来完成，它的使用框架取决于你的布局要求和。

因为那些箱子似乎是DIV与CSS3盒子阴影属性，你可以用做这样的事情在纯CSS：悬停

HTML：

<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

CSS：

body { 
    background-color: black; 
} 

.box { 
    background-color: grey; 
    width: 200px; 
    height: 400px; 
    float: left; 
    border: 6px solid red; 
    margin: 10px; 
} 

.box:hover{ 
    width: 250px; 
    /* This is 52px total. 1/2 of that is for top and the other half is for bottom. */ 
    height: 452px; 
    /* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */ 
    /* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */ 
    /* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */ 
    margin-top: -18px; 
-moz-box-shadow: 0 0 50px red; 
-webkit-box-shadow: 0 0 50px red; 
box-shadow:   0 0 50px red;  
} 

---

编辑2：

Revised jsFiddle DEMO

Answer 2

这很容易用一些HTML和CSS完成。它们通常被称为“Dropdown”菜单或“弹出式”菜单，并且有大量关于如何制作它们的教程;这里有一个：

http://www.seoconsultants.com/css/menus/tutorial/

Answer 3

你可以做到这一点使用 “改造：规模（X，Y）” 按钮放大你的元素。

E.g.

div:hover{ 
transform: scale(1.5, 1.25); 
-moz-transform: scale(1.5, 1.25); 
-ms-transform: scale(1.5, 1.25); 
-webkit-transform: scale(1.5, 1.25); 
-o-transform: scale(1.5, 1.25); 
} 

将使您的div在x轴上缩放1.5倍，并在y轴上保持1.25倍。

要添加阴影 -

div:hover{ 
-moz-box-shadow: 5px 5px 5px #888; 
-webkit-box-shadow: 5px 5px 5px #888; 
box-shadow: 5px 5px 5px #888; 
}