3

さて、リンクがホバーされたときにポップアウトするボックスを作成しようとしていますが、

基本的なことはカバーしましたが、何らかの理由で、私がやろうとしていることを完全に達成できませんでした。

ここでわかるように、http://jsfiddle.net/EpV87/1/ (申し訳ありませんが、私が抱えている問題の再現が不十分です)

私がやろうとしているのは、マウスがホバーされている場合はボックス（TEST）が表示さHOVER HEREれ、マウスがホバーされている場合はボックスが表示されるようにすることです。

マウスが に入ったときはTEST正しく動作しますが、その他の空のスペースにホバーすると、ボックスがまだ表示OTHERされているため正しく動作しません。TEST

マウスがその他の空のスペースに置かれた場合、ボックスを非表示にするにはどうすればよいですTESTか ありがとう、私はjQueryの初心者です。

4

3 に答える 3

5

この古い答えに触発されました:

var $link = $(".link");
var $box = $("#box");

$link.mouseenter(function() {
  clearTimeout($box.data('timeoutId'));
  $box.show(200);
}).mouseleave(function() {
  var timeoutId = setTimeout(function() {
    $box.hide(200);
  }, 650);
  $box.data('timeoutId', timeoutId);
});

$box.mouseenter(function() {
  clearTimeout($box.data('timeoutId'));
}).mouseleave(function() {
  var timeoutId = setTimeout(function() {
    $box.hide(200);
  }, 650);
  $box.data('timeoutId', timeoutId);
});
.link {
  border: 1px solid red;
  padding: 10px;
}

#box {
  display: none;
  border: 1px solid red;
  margin-top: 10px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link">Hover me</a>
<div id="box">Surprise!</div>

于 2012-12-20T16:00:37.190 に答える
0

私がチェックしたバージョンでは、別の mouseleave ハンドラー内で mouseleave を処理していましたが、セレクターにタイプミスがありました $('#abc').mouseleave(function(){... 。 $('.abc').mouseleave(function(){...

最初に投稿したバージョン

http://jsfiddle.net/EpV87/1/

HTML

<a class="abc">ABC</a>
<div id="def">TEST</div>

Javascript

$('.abc').mouseenter(function(e) {
    $('#def').show(200);
}).mouseleave(function(e){
    $('#abc').mouseleave(function(){
        $('#def').hide(200);
    });
});

解決

http://jsfiddle.net/EpV87/6/

HTML

<a class="abc">ABC</a>
<div id="def" style="display: none;">TEST</div>

Javascript

$('.abc')
    .on("mouseenter", function () {
        $("#def").show();            
    })
    .on("mouseleave", function () {
        $("#def").hide();
    });
于 2012-12-20T16:06:54.027 に答える
0

2 つの要素を含めるには、別の div が必要です。

<div id="container">
    <a class="abc">ABC</a>
    <div id="def">TEST</div>
</div>

このようにして、マウスがコンテナ div を離れたときに TEST div を非表示にすることができます。</p> 

$('.abc').mouseenter(function(e) {
    $('#def').show(200);
});
$('#container').mouseleave(function(e){
    $('#def').hide(200);
});

ここで確認できます。

于 2012-12-20T16:09:10.720 に答える