5

看到的效果是，当鼠标悬停在框上时，框的大小会增加，并且还会出现阴影。

当鼠标不在盒子上时，它们会回到相同的大小而没有阴影。

普通的：

在此处输入图像描述

鼠标移到：

在此处输入图像描述

滚动这些框以查看此处的效果。

4

3 回答 3

9

jsFiddle 演示

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

由于这些框似乎是具有 CSS3 框阴影属性的 div，因此您可以使用 :hover 在纯 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：

修改后的 jsFiddle DEMO

在此处输入图像描述

于 2013-01-03T00:33:17.790 回答
5

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

将您的 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;
}
于 2013-01-03T14:18:35.643 回答
1

这可以通过一些 HTML 和 CSS 轻松完成。它们通常被称为“下拉”菜单或“弹出”菜单，并且有大量关于如何制作它们的教程；这是一个：

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

于 2013-01-02T22:57:02.953 回答