jQuery的Mousenter-MouseLeave for Embeded Image in Button在Firefox和IE上不起作用

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

更新了小提琴