Jquery Mouseover-Effekt funktioniert nicht innerhalb <button> Element in Firefox

Question

Ich arbeite an meinem 1-Seite-Portfolio, aber bin auf diesem 1 Bit von jquery stecken. Ich habe 2 Pseudoknöpfe, die nur auf Seitenverknüpfungen sind. Ich benutze jquery, um ein leeres Inneres dieser Links dynamisch hinzuzufügen, und schalte dann die Deckkraft dieser Bereiche um, so dass ich die Schaltfläche scheinbar animiere. Mein Overlay-Span Bild ist heller in der Farbe, so dass es leuchtet. Ich habe ein Kontaktformular auf dieser Seite und ich wollte den Button-Button mit dem gleichen Button-Effekt versehen. Dies funktioniert in IE und Chrome, aber nicht in FF. In FF scheint der Mouseover nie auf dem Element ausgelöst zu werden, das in der Schaltfläche verschachtelt ist. Es funktioniert funktioniert wie geplant auf den Links, so dass ich nicht sicher bin, was dieses Element nicht erfüllen kann. Der Texteinzug ist auch nicht arbeitet in FF, so dass die eigentliche Schaltfläche Text zugunsten des Hintergrundbildes verschwunden ist.

hier ist mein Markup:

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

und später habe ich die folgende Schaltfläche, die ich die gleiche Art und Weise verhalten möchten:

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

hier ist die jquery ich hinzufügen bin mit zu ein leeres span-tag innerhalb jedes links und der button (mit einer opazität von 0), gefolgt von dem code, den ich habe, um die opazität des span auf 100% bei mouseover zu animieren. das funktioniert super für die Links.

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

und schließlich die CSS i auf die Links und auf die Schaltfläche bin mit

#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; 
} 

Dieser eine mir ein wenig bekloppt fährt. Ist das ein Fehler oder fehlt mir etwas? Könnte deine frischen Augen wirklich auf diesen verwenden. Vielen Dank!

EDIT: in den Kommentaren zu diesem Post: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html Ich fand die Lösung für die firefox "Phantompolsterung" auf meiner Schaltfläche.

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

huzzah! natürlich fand ich dann heraus, dass der IE an der Animation transparenter Bilder erstickt und einen schrecklich aussehenden schwarzen Rahmen rendert, also habe ich betrogen und eine weiße Hintergrundfarbe zugewiesen (was funktioniert, da mein Hintergrund weiß ist, aber den Zweck von transparenten PNGs und Begrenzt mich in meiner bg Wahl)

Answer 1

Ich bin nicht sicher, warum das Span Element innerhalb der Taste nicht ein Ereignis auf Hover abfeuert, aber Sie sollten leicht in der Lage sein, es zu umgehen, indem Sie nur nach dem Ereignis suchen Knopf selbst. Hier ist a demo!

Außerdem habe ich Ihren Code ein wenig geändert, .wrapInner() ist nur gemacht, um zu tun, was Sie am Anfang des Skripts tun. Und es gibt keinen Grund, .live() in dieser Situation zu verwenden: