Question

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

我有两个div，叫做“first”和“second”。最初div“second”被隐藏，div“first”在页面加载时可见。一旦我将鼠标悬停在“第一个”div上，“第二个”div就可以看到并且“first”被隐藏了。现在我想要它然后当我从“第二个”div中鼠标时，“第一个”div应该是可见的而“second”应该隐藏。我的问题是，当我第一次将鼠标悬停在“第一个”div上时，“第二个”变为可见但后来鼠标悬停不起作用，“第二个”div未被隐藏。

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

});


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

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

Answer 1

Working Fiddle

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

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

Answer 2

没有onmouseover功能，您可以使用mouseover或.on('mouseover',.....)

你可以这样做：

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

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

<强> Fiddle Demo

如何隐藏和显示div

2 个答案: