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发生时，您将侦听器分配给该元素，因此您需要将鼠标移出并再次悬停以调用您添加的新侦听器...

解决方案：
您不需要内联HTML上的mouseover和mouseleave，只需在加载JS时直接添加mouseover和mouseleave侦听器。这样一来，您便会从一开始就拥有监听器，而不仅仅是在第一次悬停时添加它。

下面的代码显示了它的工作方式：

$('.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>

jQuery onmouseover函数不会在第一次悬停时触发

1 个答案: