Question

我遇到问题让背景图像悬停在边界链接上的轻松进出效果，说实话我甚至不知道使用哪一个。图像要么随着过渡而移动，要么根本不做任何事情。任何帮助都会很棒。谢谢！

.cta { margin: 0; padding: 1.4em 0 1.4em 0; cursor:pointer; display:block; text-align:center; width:100%; font-size:  2.3em !important; color:#FFF !important; font-weight: 700; font-style: italic; text-transform: uppercase; border: 0; background-image: url(http://i.imgur.com/BaLv0X5.jpg);  background-repeat:no-repeat; background-position:center center;}
.cta:hover { text-decoration:none; border: 0; opacity:0.8; }
a.cta  {border-bottom: none !important; text-decoration: none;}
.cta span {border: #fff 3px solid; padding: 0.3em;}
.cta span:hover {background-image: url(http://i.imgur.com/mrbBt4f.jpg); background-repeat:no-repeat; background-position:center center; }

<a class="cta" href="learn-more" title="Understand your data today!">
<p><span>Understand your data today!</span></p>
</a>

Answer 1

遗憾的是，转换不适用于背景图像。你可以查看css规格 - 你可以做背景颜色而不是图像。你必须尝试使用图像和jquery的解决方案。

Answer 2

我猜CSS转换会起作用。

将以下CSS代码添加到您的班级 .cta ＆amp; .cta span

<强> CSS

 -webkit-transition: all 0.3s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

DEMO

Answer 3

@ mia-sno是正确的，你无法转换背景图片。如果你想要在悬停时一直改变图像，我会改变：

.cta span:hover

到

.cta:hover span

由于您的codepen中没有任何转换，我会使用@ divy3993建议并使用该css。如果你想将图像从模糊转换为聚焦，你需要重新构建你的html并将图像从背景中移出。有几种方法可以做到这一点，但我希望有所帮助。

轻松背景图像悬停

3 个答案: