Firefox의 <button> 요소에서 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> 

내가 추가 사용하고있는 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"); 
    } 
}); 

그리고 마지막으로 내가이 하나의 링크와 버튼

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

에 사용하고있는 CSS는 나에게 약간의 박쥐를 운전

. 이게 버그 야? 아니면 내가 놓친 게 있니? 정말 이걸 보셨나요? 감사!

편집 :이 게시물에 대한 의견 : http://stopdesign.com/archive/2009/02/04/recreating-the-button.html 내 버튼에 파이어 폭스 "팬텀 패딩"에 대한 해결책을 찾았습니다.

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

huzzah! 물론 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"); 
    } 
});