onmouseover / onmouseout与chrome上的JQuery .hover发生冲突？

Question

This is working fine on Firefox but not on Chrome or Safari. I had jQuery .hover and was working fine but when I added a inline onmouseover / onmouseout to a image inside that div, the .hover (.main-description) wont show. It actually changes the state to "block" dynamically when I hover but the text block (.main-description) wont show.

HTML:

<img src="no-hover.png" 
width="250" height="250" title="me"
onmouseover="this.src='hover.png';" 
onmouseout="this.src=no-hover.png';">

JS:

$(".feature-main").hover(
    function() {
        $(this).children(".main-description").show();
    }, 
    function() {
        $(this).children(".main-description").hide();
    }

Any help would be appreciated. Should I come with a different solution perhaps? Move the onmouseover / onmouseout to JS too?

You can check out the site at here

Thank you!

Answer 1

Hi @Marcio it is not a good practice to make two functionalities for the same thing. You need to move the src replacement in the jquery code. I suggest something like this:

$(".feature-main").hover(
function() {
    $(this).children(".main-description").show();
    $(this).attr('src', 'hover.png');
}, 
function() {
    $(this).attr('src', 'no-hover.png');
    $(this).children(".main-description").hide();
}

What you have show in the url i do not see a problem on the image, but your approach is not good for the separate logic.

Answer 2

Instead go unobtrusive with mouseenter/mouseleave and remove the inline event handlers:

$(".feature-main").on({
    mouseenter:function() {
        $(this).attr('src', 'hover.png')
               .find(".main-description").show();
    }, 
    mouseleave:function() {
        $(this).attr('src', 'no-hover.png')
               .find(".main-description").hide();
    }
});

use .find() method if your target element is child of another child element.