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

Question

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

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

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

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

Спасибо!

Answer 1

Используйте jQuery's hover и toggle magic:

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

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

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

Answer 2

Это должно решить вашу проблему.При наведении указателя мыши (наведении курсора мыши) на идентификатор hover, идентификатор принципала будет скрыт, а когда я уберу курсор мыши с идентификатора наведения мыши, идентификатор принципала снова будет отображаться:

   // 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

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

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

Answer 4

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

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

<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/