在 mouseenter 上隐藏 div - 但保留它答案

【问题标题】：hide div on mouseenter — but keep it在 mouseenter 上隐藏 div - 但保留它
【发布时间】：2021-03-25 21:33:30
【问题描述】：

我有两个 div——当鼠标进入 divA 时，它应该消失，而 divB 应该出现。当 mouseleave divB divA 应该再次显示并且 divB 消失。我已经使用此代码来实现它：

$("#divA").on("mouseenter", function() {
        $("#divA").hide();
        $("#divB").show();
    });
    $("#divB").on("mouseleave", function() {
        $("#divA").show();
        $("#divB").hide();
    });`

唯一的问题是当 divA 隐藏另一个 div（它曾经坐在它下面）进入他的位置时......所以问题是是否有办法让 divA 视觉上消失而不是“物理上”？谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

查看this 答案以获取有关display、visiblility 和opacity 之间差异的更多详细信息。在链接中，您要查找的是在occupies space 下打勾的那些。

基本上你想设置它的 css 属性

element.hidden {
    opacity: 0;
}

它在视觉上隐藏了元素，但仍然可以与之交互。

【讨论】：

非常感谢！当使用 $("#divA").css({"opacity":"0"}) 和 $("#divA").css({"opacity":"1"}) 时，它可以工作！

【解决方案2】：

我猜你想要一些与名为visibility 的css 属性相关的东西。此属性隐藏元素但“将其保留在那里”。

https://www.w3schools.com/CSSref/pr_class_visibility.asp

看起来你正在使用 jQuery。所以我搜索了一下，我找到了这个答案，它准确地解释了如何使用 jQuery 更改元素的可见性。

https://stackoverflow.com/a/9614662/2250437

可能对你有用。

【讨论】：

【解决方案3】：

安装hide() 和show()，尝试设置CSS visibility 属性如下：

$("#divA").on("mouseenter", function() {
    $("#divA").css('visibility', 'hidden');
    $("#divB").css('visibility', 'visible');
});
$("#divB").on("mouseleave", function() {
    $("#divA").css('visibility', 'visible');
    $("#divB").css('visibility', 'hidden');
});

【讨论】：

【解决方案4】：

改用display 属性，尝试使用opacity 属性：

$("#divA").on("mouseenter", function() {
    $("#divA").css("opacity", 0);
    $("#divB").css("opacity", 1);
});

$("#divB").on("mouseleave", function() {
    $("#divA").css("opacity", 1);
    $("#divB").css("opacity", 0);
});

【讨论】：