悬停时的 css shift 效果

Question

我正在尝试在悬停时创建一个 css 效果，但这不起作用。我希望灰色的 div 不会移动。

我将 bootstrap 3 用于网格，24px 用于装订线(每边 12px)。

此效果必须兼容IE8。

请问有什么帮助吗？

.bgd-effect {
  position: absolute;
  height: 100%;
  display: block;
  left: 12px;
  right: 12px;
  background-color: blue;
  z-index: 1;
}
.bgd-effect:hover {
  left: 17px;
  right: 8px;
}

Answer 1

根据您用于问题的图片判断，下面的解决方案是一个简单的解决方案，适用于多种不同的浏览器。

在这里查看:http://codepen.io/jacobg182/pen/Vvebxy

只需使用伪悬停效果添加以下 css:

.div:hover {
  cursor: pointer;
  -moz-box-shadow: 8px 15px 0px #00C2F1;
  -webkit-box-shadow: 8px 15px 0px #00C2F1;
  box-shadow: 8px 15px 0px #00C2F1;
  -webkit-transition: all 500ms ease;
}

还要确保在没有伪悬停状态的情况下向 div 添加过渡(只是为了减慢它看起来更好)

.div {
 transition: all 0.8s ease;
}