更改img src并取消绑定悬停在菜单选择jquery上答案

【问题标题】：change img src and unbind hover on menu selection jquery更改img src并取消绑定悬停在菜单选择jquery上
【发布时间】：2013-02-08 13:20:37
【问题描述】：

使用stackoverflow的第一个问题！耶！

我有一个 site 我正在开发。它使用图像作为菜单选项，在悬停时，我在 jquery 中更改了 img src

当您单击要转到的菜单时，我希望悬停时的图像留在那里。我这样做了： $("#one").click(function(){ $(this).attr('src', 'images/hover1.jpg'); $(this).unbind('mouseleave mousehover');

所以这是成功的，但是在另一个菜单单击时，我无法让悬停图像消失，然后它不再悬停（因为我取消绑定它） - 但在另一个菜单单击时绑定它不起作用。

有什么建议吗？

【问题讨论】：

哇酷！为您的出色工作竖起大拇指！ ...嗯，问题是什么？
抱歉，输入前已保存问题：P
是的，努力想出一个你没有做太多的解决方案的开始
我确实尝试了其他东西，但没有任何效果。就像我将绑定添加到其他菜单点击一样，以绑定所有其他菜单，除了被点击的菜单。（以便悬停在那些上起作用）。
$("#two").click(function(){ $("nav img").bind('mouseenter mouseleave'); $(this).unbind("mouseenter mouseleave") ; $(this).attr('src', 'images/hover2.jpg');}); - 你明白我的逻辑吗？ - 所以我启用悬停来处理所有图像，然后禁用被点击的图像

标签： jquery menu hover image src

【解决方案1】：

首先。我认为它建议在这里创建一个 CSS 解决方案。

我检查了您的 javascript 文件并在我的浏览器中进行了一些修改。最后，我为您构建了一个可行的解决方案。

$(document).ready(function() {

   var hoverfuncIn = function(){ $(this).attr('src', $(this).attr('src').replace(/(\D)(\.jpg)$/g,'$12$2')); };
   var hoverfuncOut = function(){ $(this).attr('src', $(this).attr('src').replace(/2(\.jpg)$/g,'$1')); };
   var clickToggle = function(e){
    $('.selected').hover(hoverfuncIn,hoverfuncOut).removeClass('selected').mouseout();
        $(e.currentTarget).addClass('selected').unbind('mouseleave mousehover');
}

   $('nav img').hover(hoverfuncIn,hoverfuncOut);

   $("#one").click(function(e){
      clickToggle(e);

...

【讨论】：