CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Marcio
Marcio

Reputation: 317

onmouseover / onmouseout conflicting with JQuery .hover on chrome?

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!

Upvotes: 0

Views: 117

Answers (2)

George Plamenov Georgiev
George Plamenov Georgiev

Reputation: 702

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.

Upvotes: 1

Jai
Jai

Reputation: 74738

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.

Upvotes: 0

Related Questions