jQuery顯示/隱藏特定的div <li></li>徘徊時

Question

我有一個顯示列表的頁面，用戶可以添加和刪除項目。

在每個<li></li>上，都有一個與該項目匹配的小刪除按鈕。

現在，刪除按鈕僅在用戶懸停列表時顯示。 我想要做的是隻顯示一個刪除按鈕，當用戶懸停在特定項目上。

這是我到目前爲止有：

$(document).ready(function() { 
    $(".delete_update").hide(); 
    $('.cell').hover(function(){ 
     $(".delete_update").show(); 

     $('.cell').mouseout(function(){ 
      $(".delete_update").hide(); 
     }); 
    }); 
}); 


<li class="cell" id="post<?php echo $postid ?>"> 
    <div id="update<?php echo $postid ?>"> 
     <?php echo $post ?> 
    </div> 
    <div id="eraser<?php echo $postid ?>"> 
     <a href="#" id="<?php echo $postid ?>" class="delete_update">Delete !</a> 
    </div> 
</li> 

，我打算給變量添加到jQuery來包含每個單元的「ID」，某事像：

var element = $(this); 
var I = element.attr("id"); 
$('.cell' + I).hover(function() { 
    $(".delete_update").show(); 
}); 

但這種止跌沒有工作。

任何想法？

Answer 1

試試這個：

$(function(){ 
    $('.cell').hover(function(){ //Hover takes 2 callbacks one for mouseenter and one for mouseleave 
      $(this).find('.delete_update').show(); //show the button which is inside the current li hovered 
    }, 
    function(){ 
     $(this).find('.delete_update').hide(); //hide the button which is inside the current li hovered 

    }); 
}); 

或者只是使用撥動

$(function(){ 
     $('.cell').hover(function(){ // Same callback will be executed if only one is mentioned, on mouseeneter and mouse leave 
       $(this).find('.delete_update').toggle(); //toggle the button visibility which is inside the current li hovered 
     } 
    }); 

• .hover()
• .toggle()

Answer 2

使用上下文選擇

$(document).ready(function(){ 
    $(".delete_update").hide(); 
    $('.cell').hover(function(){ 
     $(".delete_update", this).show(); 
    }, function(){ 
     $(".delete_update", this).hide(); 
    }); 
}); 

或

$(document).ready(function(){ 
    $(".delete_update").hide(); 
    $('.cell').hover(function(){ 
     $(".delete_update", this).toggle(); 
    }); 
}); 

Answer 3

變化：

$(".delete_update").show(); 

到

$(this).find(".delete_update").show(); 

或

$(".delete_update",this).show(); 

Answer 4

無法使用CSS！

.delete_update 
{ 
    display:none; 
} 

.cell:hover .delete_update 
{ 
    display:block; 
} 

看到這個小提琴：http://jsfiddle.net/htqkt/1/

當然，你不明白的jquery的花哨trasitioning，但你coulld使用CSS過渡，以實現在現代瀏覽器同樣的事情