Как отменить() событие hover/mouseover?

Question

Моя идея очень проста. У меня есть панель меню из неупорядоченного списка из 3 предметов. Каждый элемент имеет изображение, совпадающее с заголовком. Я сделал Photoshop «активную» версию каждого значка. Каждый раз, когда элемент списка зависает, я хотел, чтобы src img изменился на значок «active». Но я также хочу, чтобы значок «active» оставался один раз нажатым.

У меня есть общее представление о том, как это должно быть написано, но я никогда не использовал Bind() или отвязать() перед

Я хочу знать, как правильно написать следующее:

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, но я отправлю его, если вам это нужно. Это был пример 1 из 3-х классов (элементы списка), поэтому я не знаю, можете ли вы сделать это, используя его родительский элемент и используя children(), и измените значок на основе возвращаемого значения, на которое был навешен ребенок или нажмите, но это будет еще более полезно.

---

UPDATE

Хорошо, так что я использовал отвязать правильно, но ГКЗ IMG в элементе списка будет изменить только один раз. Значение, если я нажимаю на них по одному, 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'); 
}); 

---

Update: Все, что вы пытаетесь сделать, может быть сделано с помощью 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; 
} 

---

Update 2: Я не был уверен, как работает вкладка система, но вы должны были бы некоторые сценарии, чтобы добавить или удалить nav_active класс имя:

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

Answer 2

Unbind метод должен быть вызван таким образом (передавая имя события в виде строки):

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

Дополнительные примеры читать руководство пользователя: .unbind()