Question

我有一个元素（X），当将鼠标悬停在另一个元素（Y）上时，我想隐藏该元素，并在鼠标离开元素（Y）时显示它。我已经完成了这项工作，但是我还想在单击元素（Y）时隐藏该元素（X），而在离开它时不再显示它。

希望您能理解，请您帮忙？

这就是我现在拥有的：

$(document).ready(function() {
  $("#SA_SD_1").hover(function() {
    $(".pleaseselect").hide();
  }, function() {
    $(".pleaseselect").show();
  });

  $("#SA_SD_1").click(function() {
    $(".pleaseselect").hide();
  });
});

Answer 1

添加一些标志以检查是否单击了“ Y”元素：

$(document).ready(function() {
    var clicked = false;
    $("#SA_SD_1").hover(function() {
        $(".pleaseselect").hide();
    }, function() {
        if (!clicked) $(".pleaseselect").show();
    });
    $("#SA_SD_1").click(function() {
        clicked = true;
        $(".pleaseselect").hide();
    });
});

或使用remove（）方法杀死“ X”元素：

$(document).ready(function() {
    $("#SA_SD_1").hover(function() {
        $(".pleaseselect").hide();
    }, function() {
        $(".pleaseselect").show();
    });
    $("#SA_SD_1").click(function() {
        $(".pleaseselect").remove();
    });
});

Answer 2

您应该这样更改代码：

$(document).ready(function() {
  $("#SA_SD_1").hover(function() {
    $(".pleaseselect").addClass('hide');
  }, function() {
    $(".pleaseselect").removeClass('hide');
  });

  $("#SA_SD_1").click(function() {
    $(".pleaseselect").toggleClass('hide-on-click');
  });
});

CSS

.hide {
  display: none;
}
.hide-on-click {
  display: none !important;
}

在鼠标悬停/单击时显示和隐藏元素

2 个答案: