Question

确定，

首先，如果您点击此页面顶部的问题链接，则每个问题底部都会显示一些与问题相关的按钮。鼠标悬停时，它会显示有关该按钮的更多信息。这是怎么做到的？我想在我的网站上这样做。

所以基本上，我使用php while循环来回显从mysql中的用户id查询的listitems。每个listitem包含更多的块和内联元素。其中一些块元素附加了onmouseover / mouseout事件。但如果我在这些元素上使用相同的类名，当我触发鼠标悬停时，它会触发具有该类名的每个元素。我是php / js / jquery的新手，并不确定最佳方式。任何帮助都会很棒。示例如下。

<ul class="ulclass">
  <?php
    $link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
    $i = 1;
    while ($row=mysql_fetch_assoc($link)) {
      $ico = $row['url'];
      echo '
        <li>
          <a href="'.$row['url'].'" target="_blank" >
            <div class="title">'.$row['title'].'</div>
          </a>
          <div onclick="/*here i want to change the next div.css display to block*/">
            <img src="something.png" class="something_img"/>
            <div class="drop_menu" id="drop_menu'.$i.'" 
                  onmouseout="t=setTimeout(\'/*here i want to change this div.
                                     css display back to none*/\',300);" >
              <form method="post" action="" onmouseover="clearTimeout(t);">
                <input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
                <input type="submit" class="" name="delete" value="x"/>
              </form>
            </div>
          </div>
        </li>';
      $i++;
    }
    ?>
</ul>

Answer 1

让我们先解决一些小问题。您不需要将所有HTML放在字符串中，您可以执行以下操作：

<?php 
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
  $i++;
}
?>

通过这种方式，您将保留语法突出显示，并且不会因使用字符串而产生各种问题（例如必须转义所有单引号等）。

关于JavaScript / jQuery的主题 - 你不应该真正使用内联事件处理程序，例如onclick / onmouseover。维护混合代码真的很难，HTML和PHP已经足够了，不要将JavaScript添加到同一个地方。您应该在关闭<script>标记之前放入一个单独的文件（或至少在单独的</body>标记中）并按类别挂钩元素。我简化了你的代码，我也不是100％肯定你想用你发布的代码实现什么，但是通过stackoverlow标记链接的例子判断，我会做类似的事情：

<a href="'.$row['url'].'" target="_blank" class="tag">
  <div class="title">'.$row['title'].'</div>
  <div class="drop-out">Content of the drop-out.</div>
</a>

所以，我们为链接提供了tag类，我们希望将其悬停并查看内部元素，然后我们将鼠标移出它应该消失，让我们看看我们需要什么jQuery（不要）忘了把它添加到你的页面）：

$('.tag').hover(
  function () {
    // `this` points to the DOM element we are hovering
    $(this).children('.drop-out').css({
      display : 'block'
    , opacity :  1
    });
  }
, function () {
    $(this).children('.drop-out').animate({
      opacity : 0
    }, 350, function () {
      $(this).css('display', 'none');
    });
  }
);

以下是示例：http://jsfiddle.net/R6sYD/ 本例中使用的jQuery方法：

希望这有帮助。

mouseover事件类似于本网站问题底部的按钮

1 个答案: