Jquery 如何隐藏和显示div

我有一件很小的事情要做，那就是：

我有两个div，叫做“first”和“second”。最初，div“second”是隐藏的，而div“first”在页面加载时是可见的。一旦我将鼠标悬停在div“first”上，“second”div将可见，“first”将隐藏。现在我想要它，所以当我从“second”div中移出鼠标时，“first”div应该是可见的，“second”应该是隐藏的。我的问题是，当我第一次将鼠标悬停在“first”div上时，“second”会显示出来，但后来鼠标悬停在上面不起作用，“second”div也不会隐藏

$('#first').hover(function(){
 $('#second').hide();

});


$('#second').onmouseover(function(){
 $('#second').hide();
$('#first').show();

});
<div id="first"> First </div>
<div id="second"> Second </div>

$（'#first'）。悬停（函数（）{
$（“#秒”）.hide（）；
});
$（'#second'）.onmouseover（函数（）{
$（“#秒”）.hide（）；
$（'#first'）.show（）；
});
弗斯特
第二

没有

onmouseover

功能，您可以使用

mouseover

或

.on（'mouseover'，…）

您可以这样做：

$('#first').on('mouseover', function(){
    $('#second').show();
    $('#first').hide();
});

$('#second').on('mouseout', function(){
    $('#first').show();
    $('#second').hide();
});

比如手风琴：？

$('#first').on('mouseover', function(){
   $('#second').show();
   $('#first').hide();
});

$('#second').on('mouseout', function(){
   $('#first').show();
   $('#second').hide();
});