3

いくつかの情報を表示する必要があるマウスオーバーの画像のリストがあります。問題は、情報 div に対してマウス イベントがトリガーされないことです。

#team_div{
  display:block;
  position:relative;
}

#pop_div{
  width:300px;
  padding:5px;
  height:200px;
  overflow:hidden;
  border:2px solid #ccc;
  background:#fefefe;
  position:absolute;
  display:none;
}

#pop_div img{ 
  margin:10px;
  display:block;
  float:left;
}

.

<div id="team_div" class="team_div_loading">
<div id="pop_div"></div>
<table>

  list of images

</table>
</div>

.

$('#team_div > table img').hover(function() {
  var top = this.parentNode.offsetTop; 
  var left = this.parentNode.offsetLeft; 
  var img =$(this).attr('src');
  var id =$(this).attr('id');
  var content = $("#" + id + "p").html();
  $("#pop_div").show();
  $("#pop_div").css('top', top-11 +'px');
  $("#pop_div").css('left', left-12 +'px');
  $("#pop_div").html('<img src="' + img + '"/>' + content );
  $("#pop_div").fadeIn(700);
});

$("#pop_div").mouseout(function(){
  $("this").hide();
});

この場合、ホバー時に画像に対して関数が呼び出されますが、pop_div に対してトリガーされるマウス イベントはありません。

あなたの提案に感謝します。

4

1 に答える 1

0

まず、要素内で使用することはできません。そのためには div または ul li 構造を使用します。

<div class="imageDiv"></div>

でjquery関数を編集します

$('#team_div>.imageDiv img').hover(function () {
        var top = this.parentNode.offsetTop;
        var left = this.parentNode.offsetLeft;
        var img = $(this).attr('src');
        var id = $(this).attr('id');
        var content = $("#" + id + "p").html();
        $("#pop_div").show();
        $("#pop_div").css('top', top - 11 + 'px');
        $("#pop_div").css('left', left - 12 + 'px');
        $("#pop_div").html('<img src="' + img + '"/>' + content);
        $("#pop_div").fadeIn(700);
    });

間違った jquery セレクターを使用しているだけです。画像のホバー機能で何をしようとしているのかわかりませんが、上記の変更で機能しています。

于 2013-02-11T10:08:16.280 に答える