html - CSS を使用して、マウスが上にあるときにどのように大きな要素を作成しますか?

Question

見られる効果は、マウスがボックスの上にあるときにボックスのサイズが大きくなり、ドロップ シャドウも表示されることです。

マウスがボックスの上にない場合、ドロップ シャドウのない同じサイズに戻ります。

普通：

マウスオーバー：

ボックスをスクロールして、効果を確認してください。

Answer 1

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

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

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

Answer 3

これは、いくつかの HTML と CSS を使用して簡単に実現できます。それらは一般に「ドロップダウン」メニューまたは「ポップアウト」メニューと呼ばれ、その作成方法に関するチュートリアルがたくさんあります。ここに1つあります：

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