悬停时交叉淡化提交按钮

Question

我想自定义我的提交按钮，以便当鼠标悬停在它上面时，它会交叉渐变到我的精灵中的新背景图像位置。我很容易让它切换到那个位置，但我想让它慢慢淡化。

关于如何为简单链接执行此操作有大量文章，但它们都基本上将其他图像定位在按钮区域上，然后相应地淡化不透明度。使用提交按钮似乎不可能，因为输入元素似乎不能包含子元素（即其他背景精灵）。想法？

Answer 1

我不确定这是不是你看的东西，但无论如何要看看

http://snook.ca/archives/javascript/jquery-bg-image-animations

DEMO ：http://snook.ca/technical/jquery-bg/

无论如何，您仍然可以使用jquery向任何div添加一个单击侦听器事件，并使其像提交按钮一样。

$("div.submit").click(function() {
    document.forms[0].submit();
});

为鼠标添加css

div.submit:hover {
    pointer: cursor;
}

Answer 2

在所有主流浏览器中，没有一致的方法可以在CSS中执行此操作。

对于类似的东西，你真的想要jQuery。

这里有working jsFiddle，其中显示了如何执行此操作的一个示例。只需更新fade var即可更改淡入淡出的时间。

Answer 3

我不确定，但是如果你制作按钮容器（div大小与按钮完全匹配），你可以给它一个背景图像，然后淡出按钮不透明度。你能举例说明你想要融合的两种状态吗？这将有助于提供更具体的答案。