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>

这里是我用来在每个链接和按钮（不透明度为0）中添加空span标签的jquery，然后是我在鼠标悬停时将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");
  }
});

最后我在链接和按钮上使用的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元素没有在悬停时触发事件，但你应该只需在按钮本身上查找事件就可以轻松解决它。这是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");
  }
});

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

1 个答案: