我已经调试这个问题好一段时间了,我很困惑为什么它不起作用。
如您所见,我在 JSFiddle 上运行以下代码,它似乎可以正常工作:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
如您所见,当 assistance-submit-btn
元素悬停时,它会向 i
元素添加一个类。
此代码是我正在开发的本地网站的直接副本,但是由于某种原因在我的本地系统上,当 assistance-submit-btn
元素悬停时,它不会执行。
到目前为止,我已经尝试向元素本身添加 CSS 悬停,只是为了查看该元素是否在另一个元素后面并且无法悬停。
在我的本地设置中,我能想到的唯一区别是 assistance-submit-btn
元素是由 AJAX 引入的。这会影响 jQuery 悬停事件吗?任何关于为什么会发生这种情况的建议将不胜感激。
谢谢
更新:忘记提及我在控制台中没有收到任何错误。
最佳答案
是的,这是因为 Ajax 动态内容。使用此代码:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});
关于javascript - jQuery 悬停事件切换类未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37587436/