提交翻转按钮不在FF和IE中工作

我在HTML中有一个翻转提交按钮：

我使用JS代码进行翻转/hoverfunction：

  $(document).ready(function(){ $('#join').hover( function(){ $(this).attr({ src : 'images/rollover/joinOver.png'}); }, function(){ $(this).attr({ src : 'images/join.png'}); } ); });  

它适用于除Firefox和IE之外的所有浏览器。 如果我添加一个正常的“提交”按钮（ input type = "submit" ），它在任何地方都可以正常工作。

我尝试在HTML中添加type="submit" ，然后通过CSS添加hover图像效果（在HTML中和在单独的样式表中使用class ）但它不起作用。

如何在“所有”浏览器中使用翻转按钮？ （在Chrome，FF，IE，Opera，Safari中测试过）

注意：

为了澄清，我没有创建翻转图像的问题，但是创建一个翻转图像，它作为表单的“提交”按钮（启动PHP脚本）。

我的代码显示了所有浏览器中的翻转，但它不能用作FF和IE中的“提交”按钮。

Answer 1

看一下这个：

http://jsfiddle.net/LcnrJ/3/

HTML：

jQuery的：

 $(document).ready(function(){ $(".join").hover(function(){ $(".join").toggleClass("newphoto"); }); }); 

Answer 2

在IE 8和FF 24中都进行了测试

分别更改1.jpg和2.jpg图像源以及action="" 。