Question

我搜索了网站和网页，但找不到答案。

我使用<button>标记和一些jQuery来显示带有点击功能的注册表单。单击会触发按钮以使用CSS3 transformX为侧面设置动画。

问题是，即使光标不再位于按钮上，按钮仍然保持在：悬停状态。它看起来很愚蠢，因为：悬停状态改变了按钮的颜色，它发生在我到目前为止测试的所有浏览器中。只有在光标移动后才会执行：hover state end。

我尝试使用.unbind('onmouseover').unbind('onmouseout');和$(this).unbind('mouseenter mouseleave')，但都没有效果。我尝试在点击功能之后以及在css动画之后的回调中放置这些。

我是jQuery的新手所以也许这很明显，但我无法弄清楚。代码也可能已经过优化，但我只是想让它先工作。一切都缺乏这种奇怪的按钮行为。

使用jQuery 2.1.1和jQuery UI 1.11.1

这是完整的jQuery：

jQuery("#regExpander").click(function() {
            if ($('#regExpander:contains("begin registration +")').length) {
                $('#regExpander').text("hide registration –").toggleClass('lbActive').css({transform: 'translateX(-140px)'});
                $( "#regInfo" ).fadeOut( "slow", function () {
                    jQuery("#pageContents").slideToggle(900, 'easeInOutCubic');
                });
            } 
            else if ($('#regExpander:contains("hide registration –")').length){
                $('#regExpander').text("begin registration +").css({transform: 'translateX(0)'}).toggleClass("lbActive").unbind('mouseenter mouseleave');
                jQuery("#pageContents").slideToggle(900, 'easeInOutCubic', function () {
                    $( "#regInfo" ).fadeIn( "slow", function () {
                    });
                });
            } 
});

在jQuery / CSS3转换后删除按钮悬停状态

0 个答案: