Javascript 在鼠标输入时显示不同的div

我正在尝试制作一个div，你可以将鼠标悬停在上面，然后会出现另一个div。这就是我目前所拥有的

html

<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
</div>

jquery

$( "box" )
.mouseover(function() {
$( "content").style.visibility( "visible" );
})

---

非常感谢您的任何帮助。谢谢

在许多地方，您将JQuery与纯javascript混为一谈

在JQuery中执行以下操作之一：

$("#box").mouseover(function() {
    $("#content").css("visibility", "visible");
});

或者在纯javascript中执行此操作：

document.getElementById("box").onmouseover = function() {
    document.getElementById("content").style.visibility = "visible";
};

但您可以仅使用css实现相同的效果：

#框{
位置：绝对位置；
宽度：10vw；
高度：10vw；
背景颜色：蓝色；
}
#内容{
位置：绝对位置；
宽度：10vw；
高度：10vw；
背景色：红色；
可见性：隐藏；
}
#框：悬停+内容{
指针事件：无；
能见度：可见；
}

满足于此

您可以使用：

('#box').hover(
  function () {
    $('#content').show(); //or css('visibility','visible');
  }, 
  function () {
    $('#content').hide(); //or css('visibility','hidden');
  }
);

---

这将显示/隐藏div。如果您错过了“#”，请参见此处的工作小提琴：

在这里，使用display:none代替visibility属性

因此，本质上，您将对第二个div使用显示和隐藏功能

此外，您的选择器不工作，因为您正在搜索Id，并且必须在div Id前面使用#

$("#box").on("mouseover", function() {
    $("#content").show();
})

使用jQuery

$（“#框”）.on（'mouseenter'，function（）{
$（“#内容”）。追加（“”）；
});

$（“#框”）。悬停(
函数（）{
$（“#内容”）.fadeIn（）；/.show（）；
},
函数（）{
$（“#内容”）.fadeOut（）；//hide（）；
}
);
#按钮{位置：相对；}
#盒子{
位置：绝对；顶部：0；左侧：0；宽度：10vw；高度：10vw；背景色：蓝色；光标：指针；
}
#内容{
位置：绝对；顶部：100px；左侧：100px；宽度：10vw；高度：10vw；背景色：红色；
显示：无；
}

满足于此
选择器需要“#”来指定ID（例如$（“#框”）。使用纯css：太棒了！“内容”选择器需要“#”@KiiroSora09-Oops。。对不起，复制粘贴。非常感谢。
$("#box").on("mouseover", function() {
    $("#content").show();
})

$("#box").on('mouseenter', function() {
 $("#content").append("<div class='box'></div>");
});