Question

我正在尝试这样做，以便当列表中的标记名称悬停时，它应该在标记的位置（如Facebook）显示一个框。

这是我的代码：

Viewtag.php

<?php
$sql = "SELECT * FROM image_tag ORDER BY `pic_id`";
$qry = mysql_query($sql);
$rs = mysql_fetch_array($qry);

if ($rs){
  do{
    echo '<li rel="'.$rs['pic_id'].'"><label>'.$rs['name'].'</label></li>';
  }while($rs = mysql_fetch_array($qry));
}
?>

的index.php

.tagview
    {
      border:solid 3px #fff;
      width:100px;
      height:100px;
      position:absolute;
      display:none;
}

$('#taglist li').on('mouseover mouseout',function(event){
      pic_id = $(this).attr("rel");
      if (event.type == "mouseover"){
        $('#view_' + pic_id).show();
      }
      if (event.type == "mouseout"){
        $('#view_' + pic_id).hide();
      }
});

    viewlist();

    function viewlist()
    {
     $.post('viewtag.php', function(data){
            $('#taglist ol').html(data);
          });

}

<?php
    $query = mysql_query("SELECT * FROM image_tag");
    $run = mysql_fetch_array($query);
    if($run){
        do{
?>
            <div class="tagview" style = "top:<?php echo $top; ?>px; left:<?php echo $left; ?>px;" id="view_<?php echo $number; ?>"></div>
<?php
        }while($run = mysql_fetch_array($query));
    }
?>

<div id="taglist"> 
    <span class="tagtitle">List of Tags</span> 
        <ol> 
        </ol>
</div>

这很令人困惑，所以我发布了迄今为止我尝试过的内容。

Answer 1

首先，pic_id是你的变量，那么为什么你在没有var

的情况下宣布这样

pic_id = $(this).attr("rel");

对此var pic_id = $(this).attr("rel");

进行了更改

Answer 2

http://www.wellbro.com/view_tutorial?t_cat=3&t_i=3

这是教程的URL，“JQuery，PHP - 照片标记系统”

照片标记 - 将鼠标悬停在名称上以显示已标记的框

2 个答案: