提交翻转按钮在FF和IE中不起作用 [英] Submit rollover button not working in FF and IE

问题描述

我在HTML中有一个滚动提交按钮：

 < input type =imageid =joinname =joinsrc =images / join.pngvalue =join> 
  

我使用JS代码实现翻转/悬停功能：

 < script type =text / javascriptcharset =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），它可以在任何地方正常工作。

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

我怎样才能有一个可以在所有浏览器中使用的滚动按钮？
（在Chrome，FF，IE，Opera，Safari中测试）

注意：

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

我的代码在所有浏览器中显示滚动，但不能在按钮中作为 FF和IE。

解决方案

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

HTML：

 < input type =submitclass =joinvalue = SEND/> 
  

jQuery：

 < $ c $> $（document）.ready（function（）{
 $（。join）。hover（function（）{
 $（。join）。toggleClass（newphoto ）; 
}）; 
}）; 
  

I have a rollover submit button in HTML:

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

And I use JS code for the rollover/hover function:

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

It works fine in all browsers except for Firefox and IE. If I add a normal "submit" button (input type = "submit") it works fine everywhere.

I tried putting type="submit" in HTML and then adding a hover image effect via CSS (both in HTML and with using a class in a seperate stylesheet) but it doesn't work.

How can I have a rollover button which works accross "all" browsers? (Tested in Chrome, FF, IE, Opera, Safari)

NOTE:

Just to clarify, I don't have problem with creating a rollover image, but creating a rollover image which works as "submit" button for a form (launching a PHP script).

My code shows rollover in all browsers, but it doesn't function as a "submit" button in FF and IE.

解决方案

check this out:

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

HTML:

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

jQuery:

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

这篇关于提交翻转按钮在FF和IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！