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

Question

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

当鼠标没有放在盒子上时,它们会回到相同的大小,没有阴影.

正常:

鼠标移到:

滚动框以在此处查看效果.

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:

修订了jsFiddle DEMO

Answer 2

您可以使用"transform:scale(x,y)"来缩放元素.

例如

 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;
}