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

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