如果元素已经可见，我该如何阻止它切换

Question

我在页面上有悬停状态和onclick状态。我还有一个关于悬停状态的切换。如果用户已经点击了一个元素，如果重新发生悬停事件，如何停止该元素再次切换？

$("#ex").hover(function() {

 $("#prod").toggle(300).delay(1000);
 $("#test").toggle(300).delay(1000);
 $("#dev").toggle(300).delay(1000);

});

$("#prod").click(function() {
 $("#prod").unbind("mouseenter mouseleave");
 $("#prod").finish();
 $("#prod").show();
});

$("#test").click(function() {
 $("#test").unbind("mouseenter mouseleave");
 $("#test").finish();
 $("#test").show();
});

$("#dev").click(function() {
 $("#dev").unbind("mouseenter mouseleave");
 $("#dev").finish();
 $("#dev").show();
});

Answer 1

使用.is(":visible")选择器并检查它是否可见，如果是，请勿切换。

$("#ex").hover(function() {
  if (!$("#prod").is(":visible")) $("#prod").toggle(300).delay(1000);
  if (!$("#test").is(":visible")) $("#test").toggle(300).delay(1000);
  if (!$("#dev").is(":visible")) $("#dev").toggle(300).delay(1000);
});