html - 使用 CSS，如何在鼠标悬停在元素上时创建更大的元素？

Question

看到的效果是，当鼠标悬停在盒子上时，盒子会变大，并且还有阴影。

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

正常:

鼠标悬停:

滚动框查看效果 here .

Answer 1

jsFiddle DEMO

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

因为这些盒子看起来是带有 CSS3 盒子阴影属性的 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