Question

我有以下html：

  <div class="sub-service">
    <div class="sub-service__image">
      <a href="#">
        <figure>
          <img width="100%" height="auto" src="https://dummyimage.com/300"> 
        </figure>
      </a>
    </div>
    <div class="sub-service__content">
      <h2><a href="#" title="What happens when I have started trading?">eu fugiat nulla pariatur. Excepteur sint </a></h2>
      <p>uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id esuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="sub-service__footer">
      <a href="#">Read More <span style="width:30px">
      </span></a>
    </div>
  </div>

和以下js：

var $h2height = $('.sub-service__content h2').filter(function() {
  return $(this).height() >= 30;
});

$h2height.parent().parent().hover(function() {
  $h2height.parent().css("transform","translateY(-105px)");
});

当顶部父元素'sub-service'悬停时，我试图在h2为两行（高于30px）时修改h2父元素（'sub-service__content'）的css。悬停时，顶级父“子服务”可以工作，但不再悬停时，它不会回到原始状态。我做错了什么？：/

我创建了一个代码笔：https://codepen.io/anon/pen/dgOmpK

（中间元素是我要执行的操作的示例，但是h2是两行时）

谢谢

Answer 1

您的代码中的问题是您没有定义一个函数来返回原始状态，请尝试使用

$h2height.parent().parent().mouseleave(function() {
 $h2height.parent().css("transform","translateY(+105px)"); );
});

jQuery的悬停事件未恢复到原始状态

1 个答案: