jquery - 提交翻转按钮在 FF 和 IE 中不起作用

Question

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

<input type="image" id="join" name="join" src="images/join.png" value="join">

我使用 JS 代码实现滚动/悬停功能:

<script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $('#join').hover(
                    function(){ 
                        $(this).attr({ src : 'images/rollover/joinOver.png'});
                    },
                    function(){ 
                        $(this).attr({ src : 'images/join.png'});                }
                );
            });
        </script>

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

我尝试将 type="submit" 放入 HTML 中，然后通过 CSS 添加悬停图像效果(在 HTML 中以及在单独的样式表中使用 class)但它不起作用。

我怎样才能有一个跨“所有”浏览器的鼠标悬停按钮？ (在 Chrome、FF、IE、Opera、Safari 中测试)

注意:

澄清一下，我对创建鼠标悬停图像没有问题，但创建一个鼠标悬停图像用作表单的“提交”按钮(启动 PHP 脚本)。

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

Answer 1

检查一下:

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

HTML:

<input type="submit" class="join" value="SEND"/>

jQuery:

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