Question

我正在尝试构建基本的标签导航。当我将鼠标悬停在标签上时（步骤），标签的背景变为绿色。但是在浏览器的几次悬停/调整后，悬停不再起作用。然后我必须单击选项卡才能获得绿色背景。它冻结了。

这就是jsFiddle： https://jsfiddle.net/rob_the_mob_87/L84kyym1/

这是我的最小代码：

的index.html

<html>
  <head>

    <title>Tabs</title>

    <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/static.js">
    </script>

    <link rel="stylesheet" type="text/css" href="./css/main.css">
  </head>

  <body>
    <div class="process_step active" id="1">Step 1</div>
    <div class="process_step" id="2">Step 2</div>
  </body>
</html>

的main.css

.process_step{

}

.active{
  background-color: green;
}

static.js

$(document).ready(function () {
    bindShowStepHandlers()
});

this.bindShowStepHandlers = function () {
    $('.process_step').each(function() {
        $(this).hover(function () {
            var clickedStepId = $(this).attr('id');
            openStep(clickedStepId);
          });
      });
}

this.openStep = function (clickedStepId) {

      $('.process_step').each(function() {
            var stepId = $(this).attr('id');

            if (stepId == clickedStepId) {
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
      });
}

Answer 1

检查下面的这个代码段。我认为这就是你想要的......

＆＃13;

None

＆＃13;

$(document).ready(function() {
  bindShowStepHandlers()
});

this.bindShowStepHandlers = function() {
  $('.process_step').each(function() {
    $(this).on('mouseenter',function() {
        $(this).addClass('active');
    });
    $(this).on('mouseleave',function() {
     $(this).removeClass('active');
      
    });
  });
}

＆＃13;

.process_step {}

.active {
  background-color: green;
}

＆＃13;

Jquery - 在多次调整大小后将鼠标悬停更改为单击

1 个答案: