html - 轻松消除背景图像悬停

我遇到了使背景图片在边框链接上移入和移出效果容易出现的问题，老实说，我什至不知道该使用哪个。图像要么随着过渡而移动，要么什么都不做。任何帮助都会很棒。谢谢！

http://codepen.io/anon/pen/ZGewxE

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

最佳答案

不幸的是，转场不适用于背景图像。您可以检查CSS规格-您可以设置背景颜色，但不能设置图像。您将不得不尝试使用图像和jquery的解决方案。