Javascript 在鼠标上隐藏div— ；但请保留它

我有两个div-当mouseenter divA时，它应该消失，divB应该出现。当鼠标移动时，divA应再次显示，divB消失。我使用了以下代码来实现它：

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

唯一的问题是，当女主角藏起另一个女主角（过去坐在下面）进入他的位置时……所以问题是，是否有办法让女主角在视觉上消失，而不是“身体上”？ 谢谢大家!

查看答案，了解有关

显示

、

可视性

和

不透明度

之间差异的更多详细信息。在链接中，您要查找的是那些在占用空间的

下有勾号的链接

实际上，您需要设置它的css属性

element.hidden{
不透明度：0；
}

它在视觉上隐藏了元素，但它仍然可以与之交互。
我想您需要一个与css属性相关的名为
可见性的东西。此属性隐藏元素，但“将其保留在那里”


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


可能对您有用。
请尝试按如下方式设置CSS
可见性属性，而不是
hide（）
和
show（）
：

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

请尝试使用
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);
});

非常感谢！当使用$（“#divA”）.css（{“不透明度”：“0”}）和$（“#divA”）.css（{“不透明度”：“1”}）时，它可以工作！