jquery - 悬停并显示管理按钮

Question

我心里有一个很大的问题。或者只是理解悬停功能的问题。我尝试了很多方法，阅读了很多教程，但没有得到我需要的东西。这可能很愚蠢，但我正在用 jQuery 制作前端管理面板，知识技能较低。

正如您在 this image 中看到的那样，这是一个简单的网上商店列表。我想做到这一点，如果您是管理员，当您将鼠标悬停在某个项目上时，您可以看到管理按钮，例如 this image ，但仅限于悬停的项目。请帮我轻松解决这个问题。

无论如何，这是我的页面这部分的代码:

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
  $(".admin_item").hide();
  $('.item').hover(function() {
    $(".admin_item").slideToggle(".admin_item");
  });
});
</script>

<!-- $admin_item -->
<?
  $admin_item = '<div class="admin_item" style="position: absolute; padding-left: 380px;"><a href="?edit"><img src="style/icon/pencil.png" alt="" /></a><a href="?delete"><img src="style/icon/delete.png" alt="" /></a></div><div class="clear"></div>';
?>

<!-- list -->
<div class="page_content" id="goods">
  <?
    $items = array (
      1 => array("Lorem ipsum dolor sit amet, consectetur adipiscing elit.","3.65","List 3-1"),
      2 => array("Proin ut est ut purus venenatis suscipit tristique id mi.","4.00","List 3-2"),
      3 => array("Integer posuere mauris dapibus massa malesuada id malesuada velit congue.","5.49","List 3-3"),
      4 => array("Vivamus eu purus quam, ut convallis urna.","7.40","List 3-2"),
      5 => array("Suspendisse eu felis erat, ut mollis erat.","8.20","List 3-1"),
      6 => array("Morbi malesuada facilisis neque, at dapibus nibh elementum quis.","9.85","List 3-1"),
      7 => array("Proin euismod mauris ac lorem sodales faucibus.","10.00","List 3-2"),
      8 => array("Maecenas vitae neque ac nibh venenatis laoreet nec sed nisi.","12.90","List 3-3"),
    );
    $i=1;
    foreach($items as $item) :
  ?>
  <?=$admin_item?>
  <div class="item">
    <div class="details floatleft">
      <div class="image floatleft"><img src="images/items/example/thumbs/<?=$i?>_s.jpg" alt=""></div>
      <div class="description floatleft"><?=$item[0]?></div>
      <div class="price floatleft">LVL <?=$item[1]?></div>
      <div class="category floatleft"><?=$item[2]?></div>
    </div>
    <div class="cart floatleft"><img src="style/shopping_cart.png" alt="" /></div>
  </div>
  <div class="clear"></div>
  <? $i++; endforeach;?>
</div>

Answer 1

这可能是因为您正在像这样进行幻灯片切换:

$(".admin_item").slideToggle(".admin_item");

应该是:$(".admin_item").slideToggle([持续时间],[缓动],[回调]);

试试这个:$(".admin_item").slideToggle('fast');