在悬停时将div滑过其他div

Question

我有一组id为id＆＃34; side-panel-options＆＃34;

我想要的效果是

我试图以各种可能的逻辑方式改变立场＆＃34;绝对＆＃34;，＆＃34;亲和＆＃34;，＆＃34;静态＆＃34;等，但无济于事。

我现在的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

尝试缩放：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该尝试缩放

transform: scale(value);

只需在悬停标记中添加。

Answer 3

您是否意识到页面中可能只有一个带有任何给定ID的html元素？

还请显示html。例如。内联元素不占用宽度和高度。

如果您的HTML看起来像

<div id="sidepanel-options">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

没关系，即使从语义上讲，最好使用列表，ordererd列表或无序列表，具体取决于内容的特征。

但如果它看起来像

<div>
  <div id="sidepanel-options">Item 1</div>
  <div id="sidepanel-options">Item 2</div>
  <div id="sidepanel-options">Item 3</div>
  <div id="sidepanel-options">Item 4</div>
</div>

这不好，因为你使用的是重复的id，其中每个给定的id只能在整个html页面中使用一次。

对于第一个例子，css看起来有点如下：

#sidepanel-options > div {
  background-color: rgba(209,209,209,1);
  height : 75px;
  margin-top : 5px;
  transition-duration: 0.4s;
  width : 150px;
}
#sidepanel-options > div:hover {
  height: 100px;
  width: 200px; 
}

由于悬停的div的高度增加，这个解决方案仍然会将较低的div 25px推到底部。为了避免这种情况，您可以使用上面提到的transform：scale（value）规则，但是也会增加d​​iv内容的大小（可能不是您想要的）。

请注意，如果您已经为非悬停状态定义了相同的规则，则无需在：hover-selector中重复相同的规则。