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

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 Example

#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或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

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

    (function(){

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

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

    })()

和你的css

#b {
  opacity: 0;
}