jquery - 如何在两个单独的对象上创建悬停效果？

Question

我有两个 div，A 和 B。我想将鼠标悬停在 DIV A 上并显示 DIV B，但我不希望 DIV B 隐藏，直到鼠标从 DIV B 上移动。

<div id="a"><img src="images...." class="profile" id="options" /></div>
<div id="b"> //some information</div>

jQuery：

<script>
$(document).ready(function(){
$('#a').hover(function(){
$('#b').show();
},
function(){
$('#b').hide();
});
});

我的 CSS：

<style type="text/css">
<!--
.profile{ position: absolute; top: 0px; width: 20px; height: 20px;}
#id{ position: absolute; top: 20px; width: 300px; height: 400px;}
-->
</style>

我提供了 css 用于解释目的。我正在考虑更改课程，以便 DIV A 和 DIV B 具有相同的课程。这是不可能的，因为我的 DIV B 将变成聊天图像的大小。

下面是我试图描述的图像：

有人可以解释我的代码哪里出错了吗？

Answer 1

尝试这个：

$(document).ready(function(){

  $('#a').mouseenter(function(){
    $('#b').show();
  });

  $('#b').mouseleave(function(){
    $(this).hide();
  });

});

Answer 2

编辑你可以用 CSS 做所有的事情。请参阅更新的 JSFiddle 链接： JSFiddle 示例

#a,#b {
width: 200px;
height: 200px;
background: red;
}
#b {
background: blue;
display: none;
}
#a:hover + #b {
display: block;
}
#b:hover {
display: block;
}

Answer 3

据我了解，您想在光标位于 A OR B 上时显示 B，并在光标离开 A 和 B 时隐藏 B。

$("#a, #b").hover(
    function(){$("#b").show();},
    function(){$("#b").hide();}
);

小提琴：http: //jsfiddle.net/7akEc/

也可能您可以将 B 放入 A 中并仅使用 css 显示/隐藏它

#a:hover #b {
    display:block;
}

Answer 4

我不太确定你要做什么？，你是不是想在你 h 时显示 div #b

    (function(){

      $('#a').hover(function(){
       $('#b').show();
      }

      $('#b').mouseleave(function(){
       $(this).hide();
      }

    })()

在你的 CSS 中

#b {
  opacity: 0;
}