You are showing/hiding all elements with class background-hover
. What you probably want is to do this only to descendants of the element which triggered the event...
You can use find()
to query the DOM for the descendants of a certain element (this
in our case).
$(".home-get-started").hover(
function () { $(this).find('.background-hover').show(); },
function () { $(this).find('.background-hover').hide(); }
);
Be aware the in some cases both Texts will show at the same time - that's because your wrapper div also has the home-get-started class so the hover handlers will fire for that element too.