Question

我现在已经调试了这个问题，我很困惑为什么这不起作用。

正如您所看到的，我在JSFiddle上运行以下代码，它似乎没有任何问题：

＆＃13;

  $(".assistance-submit-btn").hover(function() {
    $(this).children('i').toggleClass("assistance-submit-btn-mouseover");
  });

＆＃13;

.assistance-submit-btn {
  font-size: 1.4rem;
  font-weight:300;
  padding: 10px 20px;
  background: none;
  border: 2px solid #333;
  border-radius: 10rem;
  color: #333;
  margin: 25px auto 0;
  display: block;
}

.assistance-submit-btn-mouseover {
  transform:translate(10px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit&nbsp;<i class="fa fa-caret-right"></i></button>

＆＃13;

正如您可以看到assistance-submit-btn元素悬停时，它会向i元素添加一个类。

此代码是我正在开发的本地网站的直接副本，但由于某些原因，在本地系统上，当assistance-submit-btn元素悬停时，它将无法执行。

到目前为止，我已经尝试将CSS悬停添加到元素本身，只是为了查看该元素是否在另一个元素后面并且无法悬停。

我在本地设置上可以想到的唯一区别是AJAX引入了assistance-submit-btn元素。这会影响jQuery悬停事件吗？任何关于为什么会发生这种情况的建议都会非常感激。

由于

更新：忘记提及我的控制台内没有错误。

Answer 1

是的，这是因为Ajax动态内容。使用此代码：

$(document).on({
    mouseenter: function () {
        $(this).children('i').addClass("assistance-submit-btn-mouseover");
    },
    mouseleave: function () {
         $(this).children('i').removeClass("assistance-submit-btn-mouseover");
    }
});

jQuery悬停事件切换类不触发

1 个答案: