javascript - Jquery onmouseover 函数在第一次悬停时没有被触发

Question

function hover() {
  $('.service-btn').hover(function() {
    $(this).parent().parent().find('.service-img').addClass('hideImage');
    $(this).closest('.service-row').removeClass('hover');
  })
}

function nonHover() {
  $('.service-btn').hover(function() {
    $(this).parent().parent().find('.service-img').removeClass('hideImage');
    $(this).closest('.service-row').addClass('hover');
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-row hover" style="background: url('assets/img/hover-bg.png')">
  <div class="container service-row-inner">
    <div class="service-img">
      <img src="assets/img/home-row-1.png" alt="">
    </div>

    <div class="service-details">
      <div class="service-title">
        <h2>Ready to Go</h2>
      </div>

      <div class="service-subtitle">
        <b>100% klaar voor een winters avontuur.</b>
      </div>

      <div class="service-desc">
        <p>Heeft u deze winter een roadtrip of shortski gepland? Ontdek onze all-in ReadyToGo wintercheck, de handigste inpaktips en de beste reisapps van het moment om optimaal te genieten van uw reis.</p>
      </div>

      <a href="" class="service-btn" onmouseover="hover(this)" onmouseout="nonHover(this)">
                Meer Info
            </a>
    </div>
  </div>
</div>

问题:该脚本有效，但在第一次悬停时无效。因此，如果我在类里面徘徊，什么都不会改变，但如果我在类里面徘徊，我的类就会发生变化。什么可能导致此问题？

Answer 1

那是因为您只是在鼠标悬停时添加了 hover 监听器 (mouseover=...)。

当前发生的情况:
您启动代码，但没有向 a.service-btn 元素添加监听器。当 mouseover 发生时，您将监听器分配给该元素，因此您需要再次 mouseout 和 mouseover 以调用您添加的新监听器...

解决方案:
你不需要内联 HTML 上的 mouseover 和 mouseleave，只需添加 mouseover 和 mouseleave 监听器JS已加载。这样一来，您将从一开始就拥有监听器，而不是在第一次悬停时才添加它。

下面的代码展示了它是如何工作的:

$('.service-btn').mouseover(function() {
  $(this).parent().parent().find('.service-img').addClass('hideImage');
  $(this).closest('.service-row').removeClass('hover');
  console.clear()
  console.log("hovering")
})


$('.service-btn').mouseleave(function() {
  $(this).parent().parent().find('.service-img').removeClass('hideImage');
  $(this).closest('.service-row').addClass('hover');
  console.clear()
  console.log("not hovering")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-row hover" style="background: url('assets/img/hover-bg.png')">
  <div class="container service-row-inner">  
    <div class="service-desc">
      <p>Heeft u deze winter een roadtrip of shortski gepland? Ontdek onze all-in ReadyToGo wintercheck, de handigste inpaktips en de beste reisapps van het moment om optimaal te genieten van uw reis.</p>
    </div>
    <a href="" class="service-btn">
        Meer Info
    </a>
  </div>
</div>