Question

我在我的网站中插入了悬停效果，基本上是“点击此链接＆gt;”将转换为“点击此链接＆gt;”用不同的颜色。

因为我使用cufon，我用两个单独的div进行此操作，我首先显示新的div然后隐藏旧的并运行动画。

当鼠标从顶部，左侧和右侧进入时，这很有效，但当鼠标从底部进入时，会出现闪烁并触发鼠标移动事件。

我的猜测是隐藏在节目之前完成，容器div在短时间内变空。

任何想法如何防止鼠标移动？

这些链接的php函数是这样的：

function link_arrowed($label,$font_size,$margin_to_arrow,$extended_margin,$inactive_color,$active_color){


    $html = "           <div class='arrowed_link' style='min-height:".$font_size.";'>
                             <input value='".$extended_margin."' class='extended_margin' type='text' style='display:none' hidden>

                            <div class='inactive_text' style='float:left;'>
                                <div style='float:left;margin-right:".$margin_to_arrow.";font-size:".$font_size.";color:".$inactive_color.";'>".$label."</div>
                                <div class='arrow_right' style='float:left;font-size:".$font_size.";color:".$inactive_color.";'>></div>
                            </div>

                            <div class='active_text' style='float:left;display:none;'>
                                <div style='float:left;margin-right:".$margin_to_arrow.";font-size:".$font_size.";color:".$active_color.";'>".$label."</div>
                                <div class='arrow_right' style='float:left;font-size:".$font_size.";color:".$active_color.";'>></div>
                            </div>
                        </div>
        ";

    return $html;

}

我的js：

$(document).on('mouseenter','.arrowed_link', function(){

    var extended_margin = $(this).children('.extended_margin').val();

    $(this).children('.active_text').show();
    $(this).children('.inactive_text').hide();

    $(this).children('.active_text').children('.arrow_right').animate(
        {'margin-left': extended_margin}, 
        200, function(){
    });

});

$(document).on('mouseleave','.arrowed_link', function(){

    $(this).children('.active_text').children('.arrow_right').animate(
       {'margin-left': '0px'}, 
       200,
       function(){
           $(this).parent().siblings('.inactive_text').show();
           $(this).parent().hide();  
   }); 


});

jquery hide / show导致mouseleave事件

0 个答案: