JQuery Mouseover эффект не работает внутри элемента <button>в Firefox

Question

Я работаю над своим 1-страничным портфолио, но застрял в этом 1 бите jquery.У меня есть 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 я использую, чтобы добавить пустой тег span внутри каждой ссылки и кнопки (с непрозрачностью 0), а затем код, который я имею для анимации непрозрачности диапазона до 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");
  }
});

и, наконец, CSS, который я использую для ссылок и для кнопки

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

Этот сводит меня с ума.Это ошибка или я что-то упустил?Мог бы действительно использовать ваши свежие глаза на этот.Спасибо!

РЕДАКТИРОВАТЬ: в комментариях к этому сообщению: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html я нашел решение Firefox "фантомное заполнение" на моей кнопке.

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

хаз!конечно, потом я обнаружил, что IE захлебнется прозрачными изображениями и создаст ужасно выглядящую черную рамку, поэтому я обманул и назначил белый цвет фона (который будет работать, так как мой фон белый, но побеждает назначение прозрачных PNG иограничивает меня в выборе BG)

Answer 1

Я не уверен, почему элемент span внутри кнопки не запускает событие при наведении, но вы легко сможете обойти его, просто выполнив поиск события на самой кнопке. Вот демо !

Кроме того, я немного изменил ваш код, .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");
  }
});