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-查询，最终陷入混乱......

我非常感谢你在我的挑战中提供的帮助。

祝一切顺利， 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(
    ...
);