css移位对悬停的影响

Question

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

我使用bootstrap 3作为网格，水槽为24px（每边12px）。

此效果必须与IE8兼容。

我可以帮忙吗？

ld -o program program.o

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

Answer 2

According to caniuse，您可以使用伪元素创建副本并将其放在后面。

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