jquery - 显示#id - 当悬停另一个#id 时隐藏#id

Question

如何在 jQuery 中制作这样的东西:

<div id="principal-id"></div>//这是显示的主体 ID

<div id="hover-id"></div>//当我悬停 #hover-id 时，我希望 #principal-id 消失并更改 <div id="this-id"></div> 。但是当我将光标放在 #this-id 上时停止更改，并且当光标移到外部时恢复正常，这是一种方法吗？

希望你能理解...

谢谢!

Answer 1

这应该可以解决您的问题。当我将鼠标悬停在hover-id上时，principal-id将被隐藏，当我将鼠标光标移离hover-id时，principal-id将再次显示:

   // define the mouseover event for hover-id
   $('#hover-id').mouseover(function() {
         $('#principal-id').css('display','none');
   });

   // define the mouseout event for hover-id       
   $('#hover-id').mouseout(function() {
         $('#principal-id').css('display','block');
   });