Jquery Mouseover效果不起作用<button> Firefox中的元素

Question

我正在處理我的1頁面投資組合，但被困在這個1位jQuery中。我有2個僞按鈕，只是頁面上的鏈接。我正在使用jquery在這些鏈接中動態添加一個空的內容，然後在這些跨度上切換不透明度，這樣我似乎在動畫按鈕。我的覆蓋範圍圖像顏色較淺，因此會發光。我在這個頁面上有一個聯繫表單，我想爲提交按鈕添加相同的按鈕效果。這是工作在IE和Chrome，但不是在FF。在FF中，mouseover似乎永遠不會被嵌套在按鈕內的元素觸發。它確實按照計劃在鏈接上工作，所以我不確定是什麼讓這個元素無法遵守。文本縮進也是而不是在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在每個鏈接和按鈕（不透明度爲0）內部都有一個空的span標記，後面跟着我用於在鼠標懸停上將跨度的不透明度設置爲100％的代碼。這對鏈接很有用。

$('#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"); 
    } 
}); 

最後我使用的鏈接和按鈕

#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是讓我有點古怪。這是一個錯誤還是我錯過了什麼？真的可以用你的新眼睛來看這個。謝謝！

編輯：在這篇文章的評論：http://stopdesign.com/archive/2009/02/04/recreating-the-button.html我找到了我的按鈕上的Firefox「幻影填充」的解決方案。

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

huzzah！當然我發現IE會窒息透明圖像的動畫並渲染一個可怕的黑色邊框，所以我欺騙並指定了一個白色的背景顏色（這將工作，因爲我的背景是白色的，但擊敗了透明PNG的目的和限制我在我的BG的選擇）

Answer 1

我不知道爲什麼按鈕內的span元素沒有發射懸停的事件，但你應該很容易能夠通過尋找事件按鈕本身。這裏是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"); 
    } 
});