jquery：仅当元素未单击时才具有悬停功能

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-query……

非常感谢您对我的挑战的帮助。

一切顺利， 克

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(
    ...
);