Hoverd 定价栏正在其下方移动图像

Question

我的列边框在鼠标悬停时会改变大小。但它会将我的图像位置移动到它们下方。我尝试增加列的底部边距，以免影响图像。但这没有用。我也尝试使用 z-index 属性，但也没有效果。解决此问题的最佳方法是什么？

码笔：https://codepen.io/isaiahwebdev/pen/zWjyEJ

.plans-col {
  width: 33.33%;
  float: left;
  padding: 10px;
  margin-bottom: 40px;
  text-align: center;
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}

.plans-price .title {
  margin: 50px 0;
}

Answer 1

这是因为悬停时边框的宽度不同。无论何时应用任何转换，边框都需要保持相同的宽度。诀窍是在悬停之前为对象应用透明边框。

.plans-price {
  list-style: none;
  border: 10px solid transparent; 
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082); 
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}

现在，我看到你原来的 plans-price 有 1px 的边框。您在这里有几个选择：

在对象没有初始边框的情况下使用我的解决方案，
保留我的透明边框解决方案，但添加 'faux border' 使用 1 px 的实心插图 box-shadow 和所需的颜色或
将初始边框宽度更改为 10px

尽情享受吧:)

Hoverd 定价栏正在其下方移动图像

Hoverd Pricing Column is Moving an Image Below It

html

css

margin