Эффект Jquery Mouseover не работает внутри элемента «кнопка» в Firefox

Я работаю над своим 1-страничным портфолио, но застрял на этом 1 бите jquery. У меня есть 2 псевдокнопки, которые являются просто ссылками на странице. Я использую jquery для динамического добавления пустого места внутри этих ссылок, а затем переключаю непрозрачность на этих промежутках так, чтобы казалось, что я анимирую кнопку. Мое наложенное изображение диапазона имеет более светлый цвет, поэтому оно как бы светится. У меня есть контактная форма на этой странице, и я хотел добавить тот же эффект кнопки к кнопке отправки. Это работает в IE и Chrome, но НЕ в FF. В FF кажется, что наведение мыши никогда не срабатывает на элементе, вложенном внутри кнопки. Он действительно работает со ссылками, как и планировалось, поэтому я не уверен, почему этот элемент не соответствует требованиям. Text-indent также не работает в 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 и ограничивает меня в выборе бг)


jquery firefox mouseover
person helgatheviking    schedule 08.01.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, почему элемент 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");
  }
});
person Mottie    schedule 08.01.2011
comment
Ух ты! Спасибо!! Я не мог заставить это работать что-то вроде 2 дней. Вы проверили это в Firefox? По-прежнему есть очень странное смещение по вертикали и горизонтали, которого нет в других браузерах. Но в остальном это на 97% идеально. Спасибо за подсказку по wrapinner(). - person helgatheviking; 08.01.2011