使用CSS，当鼠标悬停在它们上面时，如何创建更大的元素？

Question

看到的效果是当鼠标悬停在盒子上时盒子的大小增加，并且还有一个阴影。

当鼠标没有放在方框上时，它们会回到相同的大小而没有阴影。

正常：

鼠标悬停：

滚动框以查看效果here。

Answer 1

jsFiddle DEMO

将鼠标悬停在元素上并使其变大可以通过多种方式完成，这取决于您的布局要求和您使用的框架。

由于这些框似乎是带有CSS3 box shadow属性的div，你可以使用以下方法在纯CSS中执行类似的操作：hover

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

您可以使用“transform：scale（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);
}

将在x轴上将div放大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;
}

Answer 3

使用一些HTML和CSS很容易实现。它们通常被称为“下拉”菜单或“弹出”菜单，有大量关于如何制作它们的教程;这是一个：

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