0

我在我的网站中插入了一个悬停效果，基本上“单击此链接>”将转换为具有不同颜色的“单击此链接>”。

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

这很好用，当鼠标从顶部、左侧和右侧进入时，但是当鼠标从底部进入时，会出现闪烁并触发 mouseleave 事件。

我的猜测是隐藏是在演出之前完成的，并且容器 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();  
   }); 


});
4

0 回答 0