LexLusa LexLusa - 3 months ago 19
HTML Question

Jquery .nextAll() is not working on hover

I try to manipulate a certain class stacked in several parent div if the first div gets hovered.

And I am freaking because I can't get this to work

I created a fiddle
https://jsfiddle.net/h0153wja/9/

But here's the code:

HTML

<div class="testkrams wpb_column vc_column_container vc_col-sm-4">
<div class="inner">
<div class="wrapper">
<div class="cat-title">
<h2> TestText TextTest with break</h2>
</div>
<div class="box">
</div>
</div>
</div>
</div>


JQUERY

$('.testkrams').hover(
function() {
$(this).nextAll(".cat-title").animate({
marginLeft: '100px'
}, 250);
},
function() {
$(this).nextAll(".cat-title").animate({
marginLeft: '0'
}, 250);
}
);


Any ideas?

Am I too tired?

Thank you!

Answer

nextAll() looks for following siblings. The .cat-title element is a child of .testkrams. You should use find() instead:

$('.testkrams').hover(function() {
    $(this).find(".cat-title").animate({
        marginLeft: '100px'
    }, 250);
}, function() {
    $(this).find(".cat-title").animate({
        marginLeft: '0'
    }, 250);
});

Updated fiddle

Also note that you can achieve this in CSS alone using the transition rule:

.cat-title {
    position: absolute;
    bottom: 0;
    margin-left: 10px;
    max-width: 80%;
    z-index: 3;
    transition: margin-left .25s;
}
.testkrams:hover .cat-title {
    margin-left: 100px;
}

Working example