Jquery 鼠标悬停效果在 内不起作用火狐浏览器中的元素

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>

这是我用来在每个链接和按钮内部添加一个空的span标签的jquery（不透明度为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 的目的，限制了我的背景选择）

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");
  }
});