Question

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

我的问题是，一旦你点击链接，悬停效果仍然会播放......但我不想要这个效果。

（我不使用切换，因为最后的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");

    }
});

Answer 1

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

将鼠标悬停为红色并加下划线
点击以使其始终显示为红色并带下划线
再次点击以再次启用悬停红色

以下部分代码需要更改。对于hover，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);


});

我假设以上几点修改了你的jsfiddle。如果你移动鼠标，它会变红;带走鼠标，变黑，点击使其始终为红色。

Answer 2

您可以使用unbind jQuery方法取消绑定事件。

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

Answer 3

我更新你的小提琴click here

在点击功能中使用此查询

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

Answer 4

使用css和jquery最简单的方法

$('h1').click(function() {
    if($(this).hasClass("clicked")) {
       $(this).removeClass("clicked");
    } else {
       $(this).addClass("clicked");
    }
});

span {
  border-bottom: 5px solid red;	
  height: 0px;
  margin-top: 40px;
  left:10px;
  width: 0;
  position: absolute;
  display: inline-block;
  transition: width 0.3s;
}
h1{
  color: black;
  transition: all 0.3s;
}
h1:hover{
  color: red;
}
h1:hover span{
  width: 145px;
  color: red;	
}
h1.clicked{
  color: red;
}
h1.clicked span{
  width: 145px;
  color: red;	
}

<h1>
MY TEXT <span></span>
</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

悬停并单击Jquery

4 个答案: