Javascript 禁用：单击鼠标悬停

我有一个

div

，它有悬停：

.div {
  // css
}
.div:hover {
  // css
}

但我想在单击

div

选项1时禁用悬停。Javascript解决方案 只需添加一个禁止在单击时应用悬停样式的类：

$（'div'）。在（'click'，function（）{//上单击div时
$（this.addClass（'no-hover'）；//添加类'no-hover'
});
div{
颜色：蓝色；
}
div:not（.no hover）：hover{/*仅在div没有类“no hover”时应用悬停样式*/
颜色：红色；
}

悬停像这样尝试：

$('#myid').on({
    mouseover: function(){
        $(this).css({background: '#F94'});
    },
     mouseleave: function(){
        $(this).css({background: '#DDD'});
    },
    click: function(){
        $(this).off('mouseleave');
    }
});

试试这个：

JQUERY

$(function() {                       //run when the DOM is ready
  $(".div").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});

CSS

.div.active:hover {
cursor:default;
//same CSS as the DIV

}

您所需要的就是：

$('[your selector]').css({'pointer-events': 'none'})

请注意，这并没有保持严格的关注点分离，例如，将样式设置保持在JS范围之外，并保持在CSS范围内-应用/删除类和使用
：hover
状态可以纠正这一问题。尽管您可能希望将
tabindex
值设为负值。实际上，它将使
div
成为页面选项卡顺序中的第一项。此外，根据询问者的要求，您可能需要取消选择
：active
伪类。我正要使用JS。很好，我看到了选项2@沙吉，你说得对。我使用了
：not（：active）
而不是
：not（：focus）
，因为它没有像单击时选择的
span
栏那样为我应用活动状态。你能解释一下“无规则持久性”的意思吗？它不会从那里删除单击事件。提供的答案被标记为低质量帖子供审阅。以下是一些指导原则。提供的答案可能是正确的，但可以从解释中获益。
.disabled {

  opacity: 0.5;
  pointer-events: none;

}

.disabled:hover *

  pointer-events: none;
  cursor: not-allowed;

}