Выберите родительский и все дочерние элементы при наведении курсора мыши, jQuery

У меня есть div с элементами (h3, img, p) внутри. Я хочу использовать jQuery, чтобы определять, когда пользователь наводит курсор на этот div, чтобы затем переключить класс элемента в этом div.

Я использую приведенный ниже код:

$('.entry').bind({
    mouseover: function() {
    $('.readMore').toggleClass('inverted');
    },
    mouseleave: function() {
    $('.readMore').toggleClass('inverted');
    }
});

Это работает должным образом при наведении курсора только на div . Если вы наведете курсор на элемент внутри div (например, .entry h2 ) он отключает класс, как если бы он оставил родительский div ( .entry ), но на самом деле он внутри него. Элементы не плавают внутри div.entry , который, как я думал, может его сбить. Я попробовал $ (". Entry *") и $ (". Entry, .entry *") , но у них обоих похожие проблемы.

Есть мысли?