如何取消绑定（）悬停/鼠标悬停事件？

Question

我的想法很简单。我有一个由 3 个项目的无序列表组成的菜单栏。每个项目都有一个与标题一致的图像。我用 Photoshop 制作了每个图标的“活动”版本。每次将列表项悬停时，我都希望 img 的 src 更改为“活动”图标。但我也希望“活动”图标在点击后保持不变。

我对它应该如何编写有一个大致的想法，但我之前从未使用过 bind() 或 unbind()

我想知道下面的正确写法：

function nav_handler() {
    $(".nav_services").hover(function() {
        var src = $(".nav_services img").attr("src", "files/img/services2.png");
        $(".nav_services").mousedown(function() {
            $(this).unbind(hover);
        });
    }, function() {
        var src = $(".nav_services img").attr("src", "files/img/services.png");
    });
};

我认为这个问题不需要任何 HTML 或 CSS，但如果您需要，我会发布它。这是 3 个类中的 1 个（列表项）的示例，所以我不知道您是否可以使用它的父级并使用 children() 并根据悬停在哪个子级上的返回值更改图标或点击了，但这会更有帮助。

---

更新

好的，所以我正确使用了unbind，但是列表项中img的src只会改变一次。这意味着如果我一次单击所有这些，则 src 只会更改一次。这是我目前正在使用的完整功能：

function beta_handler() {
//Hover for Nav-item #1 (Services)
$(".nav_services").hover(function () {
    var src = $(".nav_services img").attr("src", "files/img/services2_active.png");
    $(".nav_services").mousedown(function () {
        if ($(".nav_home").hasClass("nav_active")) {
            $(".nav_home").removeClass("nav_active");
            var src = $(".nav_home img").attr("src", "files/img/home2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
        else if ($(".nav_contact").hasClass("nav_active")) {
            $(".nav_contact").removeClass("nav_active");
            var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
    });
}, function () {
    var src = $(".nav_services img").attr("src", "files/img/services2.png");
});
//Hover for Nav-item #2 (Home)
$(".nav_home").hover(function () {
    var src = $(".nav_home img").attr("src", "files/img/home2_active.png");
    $(".nav_home").mousedown(function () {
        if ($(".nav_services").hasClass("nav_active")) {
            $(".nav_services").removeClass("nav_active");
            var src = $(".nav_services img").attr("src", "files/img/services2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
        else if ($(".nav_contact").hasClass("nav_active")) {
            $(".nav_contact").removeClass("nav_active");
            var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
    });
}, function () {
    var src = $(".nav_home img").attr("src", "files/img/home2.png");
});
//Hover for Nav-item #3 (Contact)
$(".nav_contact").hover(function () {
    var src = $(".nav_contact img").attr("src", "files/img/contact2_active.png");
    $(".nav_contact").mousedown(function () {
        if ($(".nav_services").hasClass("nav_active")) {
            $(".nav_services").removeClass("nav_active");
            var src = $(".nav_services img").attr("src", "files/img/services2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
        else if ($(".nav_home").hasClass("nav_active")) {
            $(".nav_home").removeClass("nav_active");
            var src = $(".nav_home img").attr("src", "files/img/home2.png")
            $(this).addClass("nav_active");
            //$(this).unbind("hover");
            $(this).unbind("mouseenter mouseleave");
        }
    });
}, function () {
    var src = $(".nav_contact img").attr("src", "files/img/contact2.png");
});
};

Working Demo

Answer 1

hover 函数实际上是一种快捷方式。它绑定mouseenter 和mouseleave。要删除绑定，您需要取消绑定两个事件 (demo)：

$('button').hover(function(){
    $(this).addClass('red');
}, function(){
    $(this).removeClass('red');
}).click(function(){
    $(this).unbind('mouseenter mouseleave');
});

---

更新：您尝试做的所有事情都可以仅使用 CSS (demo) 完成 - 无需使用 javascript/jQuery 使事情复杂化。

HTML

<div id="nav_container">
    <ul>
        <li class="nav_services"><i></i>SERVICES</li>
        <li class="nav_home nav_active"><i></i>HOME</li>
        <li class="nav_contact"><i></i>CONTACT</li>
    </ul>
</div>

CSS

#nav_container li {
    background: #fff;
    border-color: #b6b5ba;
}
#nav_container li:hover {
    background: #dfdeff;
}
#nav_container li.nav_active {
    background-color: #cecdf6;
}
#nav_container i {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}
.nav_services i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cog-outline-128.png);
}
.nav_services.nav_active i, .nav_services:hover i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cog-128.png);
}
.nav_home i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-outline-128.png);
}
.nav_home.nav_active i, .nav_home:hover i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-128.png);
}
.nav_contact i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-telephone-outline-128.png);
}
.nav_contact.nav_active i, .nav_contact:hover i {
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-telephone-128.png);
}
#nav_container {
    width: 70%;
    margin: 20px 0 0 15%;
    height: 40px;
    background-color: #ffffff;
    border: 1px #b6b5ba solid;
    border-radius: 2px;
}
#nav_container ul {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: table;
    table-layout: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#nav_container li {
    font-family: Calibri, Verdana;
    display: table-cell;
    line-height: 40px;
    list-style-type: none;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nav_services {
    border-right: 1px #dedede solid;
}
.nav_home {
    border-left: 1px #dedede solid;
    border-right: 1px #dedede solid;
}
.nav_contact {
    border-left: 1px #dedede solid;
}

---

更新 2：我不确定您的选项卡系统是如何工作的，但您需要编写一些脚本来添加或删除 nav_active 类名：

$(function () {
    $('#nav_container li').click(function () {
        $(this)
            .addClass('nav_active')
            .siblings()
            .removeClass('nav_active');
    });
});

Answer 2

应该以这种方式调用Unbind方法（将事件名称作为字符串传递）：

$(this).unbind("hover");

更多示例请阅读手册：.unbind()