Jquery .nextAll() ne fonctionne pas sur hover

Question

J'essaie de manipuler une certaine classe empilée dans plusieurs div parents si le premier div est survolé.

Et je suis terrifié parce que je ne peux pas obtenir ce travail

J'ai créé un violon https://jsfiddle.net/h0153wja/9/

Mais voici le 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); 
    } 
); 

Des idées?

Suis-je trop fatigué?

Merci!

Answer 1

nextAll() recherche les frères et sœurs suivants. L'élément .cat-title est un enfant de .testkrams. Vous devez utiliser find() à la place:

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

Updated fiddle

Notez également que vous pouvez y parvenir en CSS seul en utilisant la règle transition:

.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