Javascript 悬停并单击Jquery

我有一个带有悬停效果的链接。 将其悬停时，文本将变为红色并带下划线。 单击时，文本将保持红色并带有下划线

我的问题是，一旦你点击链接，悬停效果仍然发挥。。。但我不想要这种效果

（我不使用toggle，因为上一个Jquery:1.9不支持它）

$("h1").addClass("clicked")

$('h1').click(function() {
    if($(this).hasClass("clicked")) {

        $("span").animate({"width": "145px"}, 300);
    $("h1").css({"color": "red"}, 300);


        $(this).removeClass("clicked");
    } else {

        $("span").animate({"width": "0"}, 300);
    $("h1").css({"color": "black"}, 300);

        $(this).addClass("clicked");

    }
}); 


$('h1').hover(function() {

    if($(this).hasClass("clicked")) {

        $("span").stop().animate({"width": "145px"}, 300);
    $("h1").css({"color": "red"}, 300);
        $(this).removeClass("clicked")
    } else {

        $("span").stop().animate({"width": "0"}, 300);
    $("h1").css({"color": "black"}, 300);

        $(this).addClass("clicked");

    }
}); 

---

可以使用unbindjQuery方法解除事件绑定

$('h1').click(function() {
    $(this).unbind('mouseenter mouseleave');
    ...
}

我更新你的小提琴

在单击功能中使用此查询

$(this).off('hover');

---

使用css和jquery的最简单方法

$（'h1'）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
$（此）.removeClass（“单击”）；
}否则{
$（此）.addClass（“单击”）；
}
});
span{
边框底部：5px纯红；
高度：0px；
边缘顶端：40px；
左：10px；
宽度：0；
位置：绝对位置；
显示：内联块；
过渡：宽度0.3s；
}
h1{
颜色：黑色；
过渡：均为0.3秒；
}
h1：悬停{
颜色：红色；
}
h1：悬停跨度{
宽度：145px；
颜色：红色；
}
h1.点击{
颜色：红色；
}
h1.1单击的跨度{
宽度：145px；
颜色：红色；
}

我的文字
如果我没有误解你的问题，你想：


悬停使其变为红色并加下划线
单击以使其始终为红色并加下划线
再次单击以再次启用红色悬停

代码的以下部分需要更改<代码>悬停

可以使用两个功能，一个用于

onmouseover

另一个用于

onmouseleave

，它会变成：

$('h1').hover(function() {
  if ($(this).hasClass("clicked")) {
    return;
  }

  $("span").stop().animate({
    "width": "145px"
  }, 300);
  $("h1").css({
    "color": "red"
  }, 300);
}, function() {
  if ($(this).hasClass("clicked")) {
    return;
  }
  $("span").stop().animate({
    "width": "0"
  }, 300);
  $("h1").css({
    "color": "black"
  }, 300);


});

---

我修改了你对以上几点的假设。若你们把鼠标移过去，它会变成红色；取下鼠标，变黑，然后单击使其始终为红色

实际上，在这十年中，它是关闭的，与正确的打开一起使用