CODEWITHSUNDEEP
jqueryinternet-explorerfirefox
Margarita
Margarita

Reputation: 277

jquery's mousenter-mouseleave for embeded image in button does not work on firefox and ie

The concept is when the mouse hovers on the button the image changes It works perfectly on the chrome but it does not on 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/

Any ideas why? Thank you in advance.

Upvotes: 0

Views: 31

Answers (1)

Tino M Thomas
Tino M Thomas

Reputation: 1746

Attach the mouseenter and mouseleave event to the button.

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

Updated the fiddle

Upvotes: 4

Related Questions