jquery的mousenter-mouseleave爲嵌入式圖像在按鈕上不起作用的Firefox和

Question

這個概念是當鼠標懸停在按鈕上的圖像變化 它在Chrome瀏覽器上完美工作，但它不在Firefox上。

的index.html

<button id="show_pdf1" class="btn btn-default" type="button"> 
    <img id="img_btn1" src="lib/img/applet.png" 
    width=" 240" height="160"></img> 
</button> 

app.js

$(document).ready(function() { 
    $("#img_btn1").mouseenter(function() { 
     $(this).attr("src", "lib/img/applet-hover.png"); 
    }) 
    $("#img_btn1").mouseleave(function() { 
     $(this).attr("src", "lib/img/applet.png"); 
    }) 
}) 

https://jsfiddle.net/m7vex2cu/4/

任何想法，爲什麼？ 預先感謝您。

Answer 1

將mouseenter和mouseleave事件附加到按鈕上。

$(document).ready(function() { 
    $("#show_pdf1").mouseenter(function() { 
     $("#img_btn1").attr("src", "lib/img/applet-hover.png"); 
    }).mouseleave(function() { 
    $("#img_btn1").attr("src", "lib/img/applet.png"); 
    }) 
}) 

更新了fiddle