Наведите указатель мыши и щелкните JQuery

Question

У меня есть ссылка с эффектом зависания. Когда вы его наводите, текст становится красным и подчеркивается. Когда вы нажимаете на нее, текст остается красным и подчеркивается.

Моя проблема заключается в том, что как только вы нажали на ссылку, эффект наведения по-прежнему воспроизводится ... Но я не хочу этого эффекта.

(я не использую пуговицу, потому что это не поддерживается последней Jquery: 1.9)

HERE'S MY JS FIDDLE

$("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, чтобы сделать его красным и подчеркнуть
• Нажмите, чтобы всегда красный и подчеркнул
• Нажмите еще раз, чтобы включить парения красный снова

Следующая часть вашего кода требует изменений. 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; \t 
 
    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; \t 
 
} 
 
h1.clicked{ 
 
    color: red; 
 
} 
 
h1.clicked span{ 
 
    width: 145px; 
 
    color: red; \t 
 
}

<h1> 
 
MY TEXT <span></span> 
 
</h1> 
 

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