Question

我有一个小社交导航，有几个脚本运行它，一个改变了背景颜色，另一个移动左/右边框到鼠标结束的元素。当您对鼠标移动非常精确但是如果光标仅移动一个像素并且即使您仍然在元素上时，两个脚本也会触发mouseleave函数，这样可以正常工作。如果再移动另一个像素，则会再次触发mouseenter。

我不知道为什么会因为你还没有离开元素而触发mouseleave？

这是导航：

<ul class="social">
<li id="socialTitle"><h4><a href="#">We are social</a></h4></li>
<li id="socialLink1"><h4><a href="#">twitter</a></h4></li>
<li id="socialLink2"><h4><a href="#">facebook</a></h4></li>
<li id="socialLink3"><h4><a href="#">pinterest</a></h4></li>
</ul>

这是处理背景颜色变化的脚本：

$(document).ready(function(){
$("#socialLink1").mouseenter(function(){
    $("#socialwrapper").each(function(){
        $(this).css("background-color","#4099FF");
    });
}),
$("#socialLink2").mouseenter(function(){
    $("#socialwrapper").each(function(){
        $(this).css("background-color","#3b5998");
    });
}),
$("#socialLink3").mouseenter(function(){
    $("#socialwrapper").each(function(){
        $(this).css("background-color","#C92228");
    });
}),
$("#socialLink1,#socialLink2,#socialLink3").mouseleave(function(){
    $("#socialwrapper").each(function(){
        $(this).css("background-color","#ed1165");
    });
})});

这是处理左/右边界移动的脚本。在默认状态下，第一个li具有边框，当您滚动其他每个li元素时，边框移动到它们，当您滚动它时，它会移回到第一个li。

$(window).load(function(){
// insert slider
$('ul.social').append('<div id="socialslider"></div>');

// initially reset
var left = "0";
var width = "235";
$('#socialslider').css({'left' : left, 'width' : width});

// sliding
$('ul li a').mouseenter(function(){
    var left = $(this).parent().position().left+1;
    var width = $(this).width()+30;
    $('#socialslider').stop().animate({
        'left' : left,
        'width' : width
    });
});

$('ul li a').mouseleave(function(){
    var left = "0";
    var width = "235";
    $('#socialslider').stop().animate({
        'left' : left,
        'width' : width
    });
});});

即使仍然在元素

0 个答案: