显示#id – 当hover另一个#id时隐藏#id

怎么能在jQuery中做这样的事情：

//这是显示的主要ID

//当我hover#hover-id时我希望＃principal-id消失并随

。 但是当我用光标在＃this-id上停止更改时，以及当光标移到外面时恢复正常是一种方法吗？

我希望你明白…

谢谢！

Answer 1

这有点清洁：

 
hover over me
 
normal
 
replacement
 var hover = function(){ $('#principal-id').toggle(); $('#this-id').toggle(); }; $('#hover-id').mouseenter(hover).mouseleave(hover); 

如： http ： //jsfiddle.net/HQQAV/

Answer 2

这应该可以解决您的问题。 当鼠标hover（hover）在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'); }); 

Answer 3

使用jQuery的hover和toggle魔术：

 $('#hover-id').hover(function () { $('#principal-id, #this-id').toggle(); }); 

但是，请确保通过以下任何选项隐藏#this-id ：

1. CSS： #this-id {display: none;}
2. Inline-CSS：

3. JavaScript： $('#this-id').hide();

Answer 4

使用.hover() ：

 $("#hover-id").hover(function(){ $("principal-id").hide(); }, function(){ $("principal-id").show(); }); 

Answer 5

 $(document).ready(function(){ $("#hover-id").mouseover(function() { $('#principal-id').hide(); }); $('#hover-id').mouseout(function() { $('#principal-id').show(); }); }); // you didn't close the ready function correctly.