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');
   });

Answer 2

使用jQuery的hover和toggle魔法：

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

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

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

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

这有点清洁：

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

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

5 个答案: