Question

我正在尝试实现类似这样的东西

但希望它只希望放大的替换在鼠标悬停在原始照片的某个部分上时生效。有谁知道我怎么能这样做？

.effectback {
  display: block;
  background: url('https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg') no-repeat;
    margin: 0 auto;
}
.effectfront {
  opacity: 0;
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  opacity: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

<div class="effectback">
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" />
</div>

Answer 1

使用背景图像，然后您可以创建一个不可见的元素，当鼠标悬停在其上时，您可以切换另一个元素的背景图像。

.social > .hidden > .fb {
    background: url(//cdn6.bigcommerce.com/s-ra1ho85/templates/__custom/images/fb1.png?t=1460125436);
    display: inline-block;
    background-size: 35px 35px;
}

.social > .hidden:hover > .fb {
    background: url(//cdn6.bigcommerce.com/s-ra1ho85/templates/__custom/images/fb2.png?t=1460125436);
    display: inline-block;
    background-size: 35px 35px;
}
.social{
  position:relative;
}
.hidden{
  position:absolute;
  top:0px;
  left:0px;
  height:10px;
  width:10px;
  background:transparent;
}

HTML

<div class="social">
    <div class="hidden">
        <div class="fb"></div>
    </div>
</div>

现在，当你将鼠标悬停在社交div的左上角时，有一个10px乘10px，其中.hidden元素将被触发：悬停，并更改.fb元素的背景图像。

希望这有帮助。

当鼠标悬停在

1 个答案: