在Jquery中，divs不会在mouseleave上返回

Question

当我将鼠标悬停在文本上时，我有一些jquery可以移动它旁边的三角形。鼠标悬停工作正常，但是mouseleave不会将三角形返回到正常状态。

$(document).ready(function(){
    $(".website_logo").mouseenter(function(){
        $(".right_triangle").css({
             'marginLeft' : "30px" 
        });
        $(".left_triangle").css({
             'marginRight' : "30px" 
        });
    });

    $(".website_logo").mouseleave(function(){
        $(".right_triangle").css({
             'marginRight' : "30px" 
        });
        $(".left_triangle").css({
             'marginLeft' : "30px" 
        });
    });
});

Answer 1

您应该将边距重置为原始值，而不是设置相反的边距。

由于您没有提供任何HTML或CSS，我假设如下。

$(document).ready(function(){
    $(".website_logo").mouseenter(function(){
        $(".right_triangle").css({
             'marginLeft' : "30px" 
        });
        $(".left_triangle").css({
             'marginRight' : "30px" 
        });
    });

    $(".website_logo").mouseleave(function(){
        $(".right_triangle").css({
             'marginLeft' : "0" 
        });
        $(".left_triangle").css({
             'marginRight' : "0" 
        });
    });
});