Question

我只想在外部div的鼠标悬停上显示内部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();    

   });

});

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

Answer 5

hover() 当您的鼠标进入div并且鼠标离开div时，会触发两个处理程序。此外，您可以使用$(this)定位当前的悬停.thumb div和find()，以便在您当前悬停的option下找到课程.thumb的孩子：

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

或者您可以使用toggle()在show和hide之间切换，而不是两个单独的函数：

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

Answer 6

我认为你试图显示和隐藏子元素，如果你将鼠标悬停在一个元素上，你可以尝试这个代码，它可以完美地适用于你的场景。

尝试演示@ http://jsfiddle.net/FTnsn/

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

如果我误解了你的问题，请告诉我......

如何用jquery显示外部div的鼠标悬停内部

6 个答案: