1

AとBの2つのdivがあります。DIVAにカーソルを合わせてDIVBを表示したいのですが、マウスがDIVBの上から移動するまでDIVBを非表示にしたくありません。

<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を提供しました。DIVAとDIVBが同じクラスになるようにクラスを変更することを考えていました。私のDIVBがチャット画像のサイズになるため、これは不可能でした。

以下は私が説明しようとしているものの画像です：

DIVAにカーソルを合わせてDIVBを表示したいのですが、DIV Aは、マウスがDIVAとDIVBの両方の上から移動したときにのみ非表示にする必要があります。

誰かが私のコードのどこが間違っているのか説明してもらえますか？

4

4 に答える 4

7

これを試して：

$(document).ready(function(){

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

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

});
于 2013-01-11T23:25:58.027 に答える
1

編集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;
}
于 2013-01-11T23:24:19.143 に答える
1

私が理解しているように、カーソルがA OR BにあるときはBを表示し、カーソルがAANDBを離れるときはBを非表示にします。

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

フィドル： http： //jsfiddle.net/7akEc/

また、おそらくBをAの中に入れて、cssだけで表示/非表示にすることができます

#a:hover #b {
    display:block;
}
于 2013-01-11T23:33:03.180 に答える
0

あなたが何をしようとしているのかよくわかりませんか？、あなたがhのときにdiv#bを表示しようとしていますか？

    (function(){

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

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

    })()

そしてあなたのCSSで

#b {
  opacity: 0;
}
于 2013-01-11T23:31:32.717 に答える