如何顯示內部鼠標懸停的外部div與jquery

Question

我只是想顯示外部div的鼠標懸停內部div。 這裏是我的jQuery作秀格鼠標懸停：

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
$('.thumb').hover(function(){ 
    $('.option').show(); 
}); 
}); 
</script> 

，這裏是我的設計代碼：

<asp:Repeater ID="rpt_file_list" runat="server" 
onitemcommand="rpt_file_list_ItemCommand" 
onitemdatabound="rpt_file_list_ItemDataBound"> 
<ItemTemplate> 
<div class="thumb" align="center"> 
<table> 
<tr> 
<td align="center"><asp:Image ID="img1" runat="server" BorderWidth="0px" 
ImageUrl="../images/Nofile_Icon1.gif" /> 
<br/> 
<asp:Label ID="lbl_file_length" runat="server" CssClass="normaltext" 
Text='<%#"("+ Eval("File_Size")+ " KB)"%>'></asp:Label> 
<br/> 
<asp:LinkButton ID="lbut_download" runat="server" 
CommandArgument='<%# Eval("File_name")+""+Eval("File_ext")%>' CommandName="Download" 
Text='<%#Eval("File_Title").ToString().Length > 15 ? Eval("File_Title").ToString().Substring(0, 15) + "..." : Eval("File_Title")%>' 
ToolTip='<%#Bind("File_Title")%>'></asp:LinkButton></td> 
<td valign="top"><div class="option" align="right" style="display:none"> 
<table> 
<tr><td><asp:ImageButton ID="imbtn_download" runat="server" CommandName="Download" ImageUrl="../images/download.gif" ToolTip="Download"/></td></tr> 
<tr><td><asp:ImageButton ID="ImageButton5" runat="server" CommandName="Preview" ImageUrl="../images/view.gif" ToolTip="Preview"/></td></tr> 
</table> 
</div></td> 
</tr> 
</table> 
</div> 
</ItemTemplate> 
<FooterTemplate> 
<asp:Label ID="lblErrorMsg" runat="server" Text="No files found." Visible="false" ForeColor="Red"> 
</asp:Label> 
</FooterTemplate> 
</asp:Repeater> 

怎麼過它無法正常工作 請幫我...

Answer 1

您需要找到懸停的後代元素thumb，您還需要使用toggle（），以便在鼠標離開時它會隱藏起來

$(document).ready(function() { 
    $('.thumb').hover(function() { 
     $(this).find('.option').toggle(); 
    }); 
}); 

Answer 2

你在找這個

$(document).ready(function() { 
      $('.thumb').mouseover(function() { 
       $('.option').show(); 
      }); 
      $('.thumb').mouseout(function() { 
       $('.option').hide(); 
      }); 
     }); 

Answer 3

你只需要找到該選項

$(document).ready(function(){ 
$('.thumb').hover(function(){ 
    $(this).find('.option').toggle(); //this will take care of show hide 
}); 
}); 

Answer 4

$(document).ready(function(){ 
    $(".thumb").hover(function(){ 
    $(".option").toggle();  

    }); 

}); 

提琴手http://jsfiddle.net/6a6Fx/1/

Answer 5

hover()採取兩種處理被解僱時，你的鼠標輸入div和時間你的鼠標離開div。此外，您還可以使用$(this)瞄準當前懸停.thumb股利和find()找到與option類孩子當前的下徘徊.thumb：

$(document).ready(function() { 
    $(".thumb").hover(function() { 
     $(this).find('.option').show(); 
    }, function() { 
     $(this).find('.option').hide(); 
    }); 
}); 

，或者您可以使用toggle()來顯示之間切換和隱藏，而不是兩個單獨的函數：

$(document).ready(function() { 
    $('.thumb').hover(function() { 
     $(this).find('.option').toggle(); 
    }); 
}); 

Answer 6

我想你想顯示和隱藏的子元素，如果你的鼠標在一個元素，你可以試試這個代碼，這將很好地工作爲您的方案。

試用演示@http://jsfiddle.net/FTnsn/

$(function() { $('.thumb').hover( function() { $(this).find('.option').toggle(); }); });

讓我知道如果我誤解你的問題......