javascript - jquery on hover 停止功能

Question

我有一个带有动画的自动播放选项卡，我想在悬停时停止自动播放

我想当我悬停标签容器（<div class="howItWorks"></div>）时自动播放停止

我尝试使用此代码，但没有

    $('.howItWorks').hover(function() {
            tabs.clearQueue();
            tabs.stop();
        }, function() {
          showTabContent();
    });

$(document).ready(function(jQuery) {
  $(function () {
    var boxes = $(".HWBlock"),
      tabs = $(".tablinks");

    function showTabContent() {
      return boxes.queue("tabs", $.map(boxes, function (el, curr) {
        return function (next) {
          boxes.hide() // hide `.box` elements
            .add(tabs) // add `.tabs` to current selector
            .removeClass("current") // remove `.current` class
            .filter(el) // current `.box` element
            .fadeIn(150) // fade in current `.box` element
            .add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
            .addClass("current") // add `current` `className` to selector
            .end() // end current selection at `.boxes` selector
            .delay(2000, "content") // set, delay `"content"` queue 5000ms
            .dequeue("content") // dequeue `"content"` queue
            .promise("content") // at completed promise of `"content"` queue
            .then(next) // call next function in `"tabs"` queue
        }
      }))
        .dequeue("tabs") // dequeue `"tabs"` queue
        .promise("tabs") // at completed promise of `"tabs"` queue
        .then(showTabContent); // call `showTabContent` recursively
    }
    $('.howItWorks').hover(function() {
            tabs.clearQueue();
            tabs.stop();
        }, function() {
          showTabContent();
    });

    showTabContent();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="howItWorks">
        <ul class="d-md-flex wow fadeInDown">
          <li class="tablinks stp-1">stp-1</li>
          <li class="tablinks stp-2">stp-2</li>
          <li class="tablinks stp-3">stp-3</li>
    
        </ul>
        <div class="how-works-text wow fadeInUp">
          <div class="HWBlock step-1" id="step-1">
            <p>test</p>
          </div>
          <div class="HWBlock step-2" id="step-2">
            <p>test 2</p>
          </div>
          <div class="HWBlock step-3" id="step-3">
            <p>test 3</p>
          </div>
        </div>
    </div>

标签： javascripthtmljquerycss