jQuery中mouseleave事件无法还原三角形位置问题求助

嘿，我瞅到你的问题啦！咱们直接说问题出在哪，怎么修：

第一个问题：语法错误 #

你写的mouseleave事件里，.left_triangle的CSS代码没写完——"30px后面少了闭合引号和大括号，这会直接导致JavaScript报错，鼠标离开的逻辑根本跑不起来！

第二个问题：逻辑错误 #

你在mouseleave里设置的CSS属性搞反了：

• mouseenter时是给.right_triangle加marginLeft: 30px，给.left_triangle加marginRight: 30px
• 那mouseleave应该把这两个属性恢复成初始值（比如默认的0，或者你原本设置的初始margin），而不是给.right_triangle设marginRight，.left_triangle设marginLeft，这完全不是反向操作呀！

修正后的完整代码 #

$(document).ready(function(){ 
    // 鼠标进入时的动画
    $(".website_logo").mouseenter(function(){ 
        $(".right_triangle").css({ 'marginLeft' : "30px" }); 
        $(".left_triangle").css({ 'marginRight' : "30px" }); 
    }); 
    // 鼠标离开时恢复初始状态
    $(".website_logo").mouseleave(function(){ 
        // 这里把margin值改回你的初始状态，比如默认是0的话就写0
        $(".right_triangle").css({ 'marginLeft' : "0" }); 
        $(".left_triangle").css({ 'marginRight' : "0" }); 
    }); 
});

另外还有个小建议：如果你的初始样式是写在CSS里的，用.addClass()和.removeClass()来切换类会比直接用.css()更优雅，也方便维护，比如：

CSS部分 #

.right_triangle, .left_triangle {
    /* 初始样式 */
    margin-left: 0;
    margin-right: 0;
    transition: margin 0.3s; /* 加个过渡动画更丝滑 */
}
.right_triangle.active {
    margin-left: 30px;
}
.left_triangle.active {
    margin-right: 30px;
}

jQuery部分 #

$(document).ready(function(){ 
    $(".website_logo").mouseenter(function(){ 
        $(".right_triangle, .left_triangle").addClass("active"); 
    }); 
    $(".website_logo").mouseleave(function(){ 
        $(".right_triangle, .left_triangle").removeClass("active"); 
    }); 
});

这样代码更干净，动画也能更流畅~

内容的提问来源于stack exchange，提问作者johnnybgood