javascript - 悬停/单击时显示和隐藏元素

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