jQueryのマウスオーバー効果は、Firefox

Question

で要素内では機能しません。私は私の1ページのポートフォリオに取り組んでいますが、jqueryののこの1ビットで立ち往生しています。私はちょうどページ上のリンクである2つの疑似ボタンを持っています。私はその後、私はボタンをアニメーション化しているように見えるように、これらのスパンで不透明度を切り替え、動的にこれらのリンクの空の内部を追加するためにjqueryのを使用しています。オーバレイしているスパン画像は色が薄いので、一種の輝きです。私はこのページに連絡フォームを持っていて、送信ボタンに同じボタン効果を追加したかったのです。これはIEとChromeでは動作しますが、FFでは動作しません。 FFでは、ボタンの中に入れ子になっている要素では、マウスオーバーがトリガーされることはありません。リンクで予定通りそれは作業を行いますので、私はこの要素が従わなかっ作るものがわかりません。実際にボタンのテキストが背景画像のために消え去られるように、テキストインデントはではなく、 FFで動作します。ここ

は私のマークアップです：

<div id="buttons" class="clearfix"> 
    <a id="worksbutton" title="<?php _e('View My Work');?>" class="scroll" href="#works"><?php _e('View My Work');?></a> 
    <a id="contactbutton" title="<?php _e('Contact Me');?>" class="scroll" href="#contact"><?php _e('Contact Me');?></a>  
</div> 

以降、私は同じように動作したい、次のボタンがあります。ここ

<button type="submit" id="sendbutton1">Send</button> 

は私が追加するために使用していますjqueryのですマウスオーバーで100％にスパンの不透明度をアニメーション化するための私が持っているコードが続く（0の不透明度を持つ）各リンクボタンの内部空スパンタグ。これはリンクに最適です。

$('#buttons a, #sendbutton1').each(function() { 
    var button = $(this).html(); 
    $(this).html("<span></span>" + button); 
    $(this).children("span").css("display","block").css("opacity","0"); 
    }); 

$('#buttons a span, #sendbutton1 span').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    // animate opacity to full on mouseover 
    $(this).stop().animate({ 
     opacity: 1 
    }, "slow"); 
    } else { 
    // animate opacity to nill on mouseout 
    $(this).stop().animate({ 
     opacity: 0 
    }, "slow"); 
    } 
}); 

、最終的に私はこの1つは私に少しバティを駆動している

#buttons a{ 
height: 61px; 
width: 161px; 
display:inline-block; 
text-indent: -9999px; 
background: url(images/sprite1.png) no-repeat; 
position: relative; 
text-align:center; 
} 

#buttons a span { 
background:url(images/sprite1.png) no-repeat; 
display:none; 
position:absolute; 
top:0; 
left:0; 
height:inherit; 
width:inherit; 
z-index:100; 
} 

a#worksbutton{ 
background-position: -161px 0; 
} 

a#worksbutton span{ 
background-position: -161px -61px; 
} 

a#contactbutton{ 
background-position: -322px 0; 
} 

a#contactbutton span{ 
background-position: -322px -61px; 
} 


#form-container button#sendbutton1{ 
    display: block; 
    background: url(images/sprite1.png) no-repeat left -2px; 
    border: none; 
    height: 61px; 
    width: 145px; 
    padding: 0; 
    margin:0; 
    cursor: pointer; 
    text-indent: -9999px; 
} 

button#sendbutton1 span { 
    background: url(images/sprite1.png) no-repeat left -61px; 
    height: inherit; 
    width: inherit; 
    z-index:100; 
} 

リンクにボタンを使用していCSS。これはバグですか、何か不足していますか？本当にこの目に新鮮な目を使うことができました。ありがとう！

EDIT：この記事のコメントで：http://stopdesign.com/archive/2009/02/04/recreating-the-button.html私は私のボタン上のFirefox「ファントムパディング」への解決策を見つけました。

button::-moz-focus-inner { padding: 0; border-style: none; } 

huzzah！もちろん、私はIEが透明な画像をアニメーション化して黒い境界線をひどく見せてくれることを知ったので、私は浮気して白の背景色を割り当てました（背景が白で透明ですが透明なPNGの目的を破ってしまいます

Answer 1

ボタン内のスパン要素がホバー上でイベントを発生させているのはなぜか分かりませんが、あなたは簡単にイベントを探して回避することができます。ボタン自体。ここにはa demo！

また、私はあなたのコードを少し変更した、.wrapInner()は、スクリプトの先頭でやっていることを行うためにだけ作られます。この状況で.live()を使用する理由はありません。

$('#buttons a, #sendbutton1') 
.each(function() { 
    $(this).wrapInner("<span></span>"); 
    $(this).children("span").show().css("opacity","0"); 
}) 
.bind('mouseover mouseout', function(event) { 
    var span = $(this).children('span'); 
    if (event.type == 'mouseover') { 
    // animate opacity to full on mouseover 
    span.stop().animate({ 
     opacity: 1 
    }, "slow"); 
    } else { 
    // animate opacity to nill on mouseout 
    span.stop().animate({ 
     opacity: 0 
    }, "slow"); 
    } 
});