如何使用jQuery在外部div的鼠标悬停上显示内部

Question

i just want to show inner div on mouse hover of outer div. here is my jquery for show div on mouse hover:

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

and here is my design code:

<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>

how ever it's not work properly please help me...

Answer 1

You need to find the descendant element of the hovered thumb , also you need to use toggle() so that it will get hidden when mouse leaves

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

Answer 2

are you looking for this

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

Answer 3

You just need to find the options

$(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();    

   });

}); 

fiddler http://jsfiddle.net/6a6Fx/1/

Answer 5

hover() take two handler which are fired when your mouse enter the div and when your mouse leave the div. Also, you can use $(this) to target current hover .thumb div and find() to find the child with class option under your current hovered .thumb :

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

or you can use toggle() to toggle between show and hide instead of two separate function:

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

Answer 6

I think you are trying to show and hide a child element if you mouse over an element, you can try this code which will work perfectly for your scenario.

Try Demo @ http://jsfiddle.net/FTnsn/

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

Let me know if I misinterpret your problem...