Question

我有一个这样的简单形式：

<section class="subscribe" title='Lorem Ipsum'>
    <form class="form-wrapper cf" method="post">
        <input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." />
        <button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
    </form>
</section>

现在，当鼠标悬停在提交按钮上时，我想更改提交按钮上显示的背景图像。为此，我尝试使用以下CSS，但它不起作用：

.form-wrapper #submitBtnForDesktop {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: background-image 0.5s;
}

.form-wrapper #submitBtnForDesktop:hover {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}

我目前正在其他地方使用transition: background-image 0.5s;更改鼠标悬停时的其他背景图片，但在这种情况下它不起作用。

任何人都知道为什么？

JSFiddle：http://jsfiddle.net/ahmadka/49nzM/

Answer 1

css3过渡仅适用于数字和（在某些浏览器中）颜色十六进制值，但不适用于您尝试执行的图像背景

要实现您想要的“从一个图像淡入另一个图像”，您需要更改您的html＆amp; css;

HTML

....
<button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">
    <div class="hax"></div>
    Subscribe
</button>
....

CSS

....
#submitBtnForDesktop .hax{
    width:100%;
    height:100%;
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: opacity 0.5s;
    opacity:1
}
#submitBtnForDesktop:hover .hax{
    opacity:0
}
....

背景图像转换不在表单按钮上工作

1 个答案: