Jquery .nextAll() 在悬停时不起作用

Question

如果第一个 div 悬停，我会尝试操纵堆叠在多个父 div 中的某个 class。

我很害怕，因为我无法让它工作

我创建了一个 fiddle https://jsfiddle.net/h0153wja/9/

但这是代码：

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);
  }
);

有什么想法吗？

我是不是太累了？

谢谢！

Answer 1

nextAll() 寻找以下兄弟姐妹。 .cat-title 元素是 .testkrams 的子元素。您应该改用 find()：

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

Updated fiddle

另请注意，您可以单独使用 transition 规则在 CSS 中实现此目的：

.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

Jquery .nextAll() 在悬停时不起作用

Jquery .nextAll() is not working on hover

jquery

html

jquery-animate

jquery-hover