缓解背景图像悬停

我有问题获得背景图像悬停缓解进出的边界链接的影响，老实说，我甚至不知道哪一个使用。图像或者随着过渡移动，或者根本不做任何事情。任何帮助都会很棒。谢谢！缓解背景图像悬停

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

来源

2015-06-04 Compton

转换不会有背景图像不幸的是工作。你可以检查CSS规格 - 你可以做背景颜色但不是图像。你将不得不尝试使用图像和jQuery的解决方案。

来源

2015-06-04 17:42:41

我猜CSS过渡会起作用。

添加以下CSS代码到你的类.cta & .cta跨度

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

来源

2015-06-04 17:42:53 divy3993

这是什么是想要的？以为他们只想改变过渡的形象，而不是生气蓬勃的姿势？ –

@MiaSno，我想是这样，因为问题本身说“缓解背景图像悬停”。还是让我们看看，如果康普顿发现它有帮助与否。 – divy3993

@康普顿，对您有帮助吗？ – divy3993

@ MIA-SNO是正确的，你不能过渡背景图像。如果你想在悬停图像变化始终如一我会改变：

.cta span:hover

到

.cta:hover span

既然有没有在你的codepen任何转变我想借此@ divy3993建议和使用的CSS 。如果您想将图像从模糊转换为聚焦，您需要重构您的html并将图像从背景中移出。有几种方法可以做到这一点，但我希望这有帮助。

来源

2015-06-04 18:02:18 ric0c

缓解背景图像悬停

回答

相关问题