悬停时的css移位效果

我正在尝试在悬停上创建css效果，但这是行不通的。我希望灰色潜水艇不要动

我对网格使用引导3，对排水沟使用24px（每侧12 px）

这种效果必须与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;
}

---

根据您用于提问的图像判断，下面的解决方案很简单，可用于多个不同的浏览器

在这里查看：

只需使用伪悬停效果添加以下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添加一个转换（只是为了降低速度，使其看起来更好）

，可以使用伪元素创建副本并将其放在后面

.bgd-effect {
  height: 100px;
  width: 100px;
  display: block;
  background-color: black;
  z-index: 2;
  position:relative;
}
.bgd-effect:before {
  content:"";
  width:inherit;
  height:inherit;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: blue;
  z-index:1;
  position:absolute;
}
.bgd-effect:hover:before{
  margin:10px;
}

---

谢谢你，但是盒子阴影效果在IE8下可以工作吗？通过在线阅读一些文章，没有，但是有一些类似的解决方法：有了IE8，你需要像我之前所说的那样做一些解决方法。您可以使用多种不同的解决方法，其中一种是使用CSS3 PIE，使用起来非常简单，我听说：

.bgd-effect {
  height: 100px;
  width: 100px;
  display: block;
  background-color: black;
  z-index: 2;
  position:relative;
}
.bgd-effect:before {
  content:"";
  width:inherit;
  height:inherit;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: blue;
  z-index:1;
  position:absolute;
}
.bgd-effect:hover:before{
  margin:10px;
}