Question

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

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

我创造了一个小提琴 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（）无法悬停

1 个答案: