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

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

});