Показать #id - скрыть #id при наведении другой #id

Question

Как можно сделать в JQuery что-то вроде этого:

<div id="principal-id"></div> // это основной идентификатор, что отображается

<div id="hover-id"></div> // когда я парить #hover -id Я хочу, чтобы # главный-id исчез и изменился с <div id="this-id"></div>. Но есть ли способ, когда я курсор на # this-id, чтобы остановить изменение, и когда курсор перемещается за пределы, возвращается к нормальному?

Надеюсь, вы понимаете ...

Спасибо!

Answer 1

это немного чище:

<div id="hover-id" style="border:1px solid black">hover over me</div> 

<div id="principal-id">normal</div> 
<div id="this-id" style="display:none">replacement</div> 

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

$('#hover-id').mouseenter(hover).mouseleave(hover); 

как в: http://jsfiddle.net/HQQAV/

Answer 2

Это должно решить вашу проблему. Когда я наведении курсора мыши (парение) над парения-ид, главный-идентификатор будет скрыт, и когда я двигаю курсор мыши от парения-ид, будет еще раз отображаться принципала-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

$(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.    

Answer 4

Используйте .hover():

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

Answer 5

Используйте JQuery в hover и toggle магии:

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

Но только убедитесь, что #this-id изначально скрыта, через любого из следующих вариантов:

1. CSS: #this-id {display: none;}
2. Инлайн-CSS : <div id="this-id" style="display: none">
3. JavaScript: $('#this-id').hide();