鼠标悬停事件类似于本网站问题底部的按钮


mouseover event similar to buttons on bottom of questions on this website

好的,

首先,如果你点击本页顶部的问题链接,每个问题的底部都有一些与该问题相关的按钮。当你把鼠标放在它们上面时,它会显示更多关于按钮的信息。这是怎么做到的?我想在我的网站上做这件事。

因此,基本上,我使用phpwhile循环来回显从mysql中的用户id查询到的listitems。每个列表项都包含更多的块和内联元素。其中一些块元素附加了onmouseover/mouseout事件。然而,如果我在这些元素上使用相同的类名,当我触发mouseover时,它会触发每个具有该类名的元素。我是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>

让我们先解决一些小问题。你真的不需要把所有的HTML都放在一个字符串中,你只需要做一些事情,比如:

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

通过这种方式,您将保留语法高亮显示,并且您将不会遇到使用字符串时出现的各种问题(如必须转义所有单引号等(

关于JavaScript/jQuery,您不应该真正使用内联事件处理程序,如onclick/onmouseover。维护混合代码真的很难,有HTML和PHP已经足够了,不要在同一个地方添加JavaScript。您应该放在一个单独的文件中(或者至少放在关闭</body>标记之前的一个单独<script>标记中(,并通过元素的类挂接到它们。我稍微简化了你的代码,我也不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方法:

  • http://api.jquery.com/hover/
  • http://api.jquery.com/children/
  • http://api.jquery.com/css/
  • http://api.jquery.com/animate/

希望这能有所帮助。