Функция jquery: hover, только если элемент не .clicked

Question

Я пытался установить следующий скрипт без успеха.

У меня есть элемент # num_11, который исчезает в паре других элементов при наведении и исчезает при наведении мыши. Это отлично работает (чем я уже горжусь)

Что я хочу, так это то, что если вы НАЖМИТЕ на # num_11, остальные элементы останутся видимыми. При повторном нажатии они снова должны исчезнуть, и весь сценарий возвращается к исходному «режиму»

$("#num_11").hover(
    function(){
        $("#identification li").each(function() {
            $("h1", this).fadeIn();
            $("span", this).addClass("opague");
        });
    },
    function(){
        $("#identification li").each(function() {
            $("h1", this).hide();
            $("span", this).removeClass("opague");
        });
    }
);

$("#num_11").click(function(){
    $(this).toggleClass('clicked');
});

В приведенном выше коде я попытался поместить $ ("# num_11"). Not (". Clicked"). Hover (и $ ("# num_11: not (". Clicked ")"). Hover ( а также запрос if-else, который закончился хаосом ...

Я был бы очень признателен за помощь в моем вызове.

Всего наилучшего, K

Answer 1

попробуйте следующий код;

$("#num_11").hover(
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).fadeIn();
        $("span", this).addClass("opague");
    });
  }
},
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).hide();
        $("span", this).removeClass("opague");
    });
  }
});
$("#num_11").click(function(){
$(this).toggleClass('clicked');
});

Answer 2

Попробуйте отфильтровать:

$("#num_11").filter(function() {
    return !$(this).hasClass('clicked');
}).hover(
    ...
);