CSS：改变悬停浮动块的高度而不触及另一个浮动块

Question

我有一个货物清单 - 带有position: relative的浮动div。我需要更改此块的高度（对于像“添加到篮子”这样的按钮），当我将其悬停而不触碰/移动另一个块时。例如：wildberries.ru/catalog/20/women.aspx

我尝试从该网站复制样式但失败了。我不完全理解它的工作方式= |

我有这样的事情：

#goods { width: 330px }
.item {
  position: relative;
  float: left;
  width: 80px;
  height: 140px;
  margin: 5px;
  padding: 8px;
  border: solid 1px #999;
  overflow: hidden;
  text-align: center;
}
.item:hover {
  height: 180px;
}
p { margin: 3px }

<div id="goods">
  <div class="item">
    <img src="http://placehold.it/80x120" />
    <p>Cool item</p>
    <button>buy</button>
  </div>
  <div class="item">
    <img src="http://placehold.it/80x120" />
    <p>Cool item</p>
    <button>buy</button>
  </div>
  <div class="item">
    <img src="http://placehold.it/80x120" />
    <p>Cool item</p>
    <button>buy</button>
  </div>
  <div class="item">
    <img src="http://placehold.it/80x120" />
    <p>Cool item</p>
    <button>buy</button>
  </div>
  <div class="item">
    <img src="http://placehold.it/80x120" />
    <p>Cool item</p>
    <button>buy</button>
  </div>
</div>

Answer 1

向div添加innerWrap .item并使用position: absolute;

 #goods { width: 330px }
.item {
  position: relative;
  float: left;
  width: 80px;
  margin: 5px;
  padding: 8px;
  height: 145px;
  text-align: center;
}
.itemWrap{
  height: 145px;
  overflow: hidden; 
  border: solid 1px #999;
  position: absolute;
}
.item:hover .itemWrap{
  height: 180px;
  z-index: 2; 
  background: #fff;
}
p { margin: 3px }

 <div id="goods">
  <div class="item">
   <div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
  </div>
  </div>
  <div class="item">
   <div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
  </div>
  </div>
  <div class="item">
   <div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
  </div>
  </div>
  <div class="item">
   <div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
  </div>
  </div>
  <div class="item">
   <div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
  </div>
  </div>
</div>