在 mouseenter 上隐藏 div - 但保留它

Posted 2023-02-21

【中文标题】在 mouseenter 上隐藏 div - 但保留它

【英文标题】：hide div on mouseenter — but keep it

【发布时间】：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 视觉上消失而不是“物理上”？ 谢谢！

【参考方案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://***.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);
);