jquery - 悬停时 div 在其他 div 上滑动

Question

我有一组id为“side-panel-options”的div

我想要的效果是

我曾尝试以“绝对”、“相对”、“静态”等各种可能的逻辑方式调整位置，但无济于事。

我现在的CSS是

#side-panel-option
{
    background: rgba(209,209,209,1);
    height : 75px;
    width : 150px;
    margin-top : 5px;
    z-index : 0;
}

和

#side-panel-option:hover
{
    background: rgba(209,209,209,1);
    height : 100px;
    width : 200px;
    position : static;
    margin-top : 5px;
    z-index : 10;
}

请建议我应该尝试什么。

Answer 1

尝试缩放:

.wrapper {
  position: absolute;
  right: 0px;
  top: 0px;
}

.wrapper .item {
  background: rgba(209,209,209,1);
  height : 75px;
  width : 150px;
  margin-top : 5px;
  transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  box-shadow: 0px 0px 7px #000;
}

.wrapper .item:hover {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}

<div class="wrapper">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>