DIV CSS 佈局教程網

 　　html

 代碼如下  

<ul id="Hover">
<li>標題標題<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">刪除</i></li>
<li>標題標題<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">刪除</i></li>
<li>標題標題<i class="modify" style="display:none">修改</i><i class="delete" style="display:none">刪除</i></li>
</ul>

　　js

 代碼如下  

// 以下代碼對使用js動態增加的元素沒有效果，需要使用on替換
$("li","#Hover").hover(function(){
    $(".modify,.delete",$(this)).show();
},function(){
    $(".modify,.delete",$(this)).hide();
});

//jquery 1.9 要使用 on 綁定事件，鼠標經過顯示修改和刪除效果
$("#Hover").on({
      mouseenter: function(){
        $(".modify,.delete",$(this)).show();
      },
      mouseleave: function(){
        $(".modify,.delete",$(this)).hide();
      }
}, "li");  // descendant selector

　　hover不是標准的事件，因此無法直接使用live進行處理，故使用以下方法代替，效果一樣

 代碼如下  

$("table tr").live({
   mouseenter:
   function()
   {
      //todo
   },
   mouseleave:
   function()
   {
      //todo
   }
});