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

我只想在鼠标悬停在外部div上显示内部div。 以下是我在鼠标悬停时显示div的jquery：

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

$（文档）.ready（函数（）{
$（'.thumb'）.hover（函数（）{
$（'.option'）.show（）；
});
});

这是我的设计代码：

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

不管怎样，它都不能正常工作

---

请帮助我…

您需要找到悬停的

拇指的子元素，还需要使用toggle（），以便在鼠标离开时隐藏它

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

您需要找到悬停的
thumb
的子元素，还需要使用toggle（），以便在鼠标离开时隐藏它

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

您需要找到悬停的
thumb
的子元素，还需要使用toggle（），以便在鼠标离开时隐藏它

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

您需要找到悬停的
thumb
的子元素，还需要使用toggle（），以便在鼠标离开时隐藏它

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

你在找这个吗

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

你在找这个吗

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

你在找这个吗

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

你在找这个吗

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

你只需要找到选择

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

你只需要找到选择

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

你只需要找到选择

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

你只需要找到选择

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

小提琴手

小提琴手

小提琴手

fiddler
使用两个处理程序，分别在鼠标进入div和鼠标离开div时触发。此外，您还可以使用
$（this）
以当前悬停
为目标。thumb
div和
find（）
在当前悬停
下使用class
选项
查找子对象。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();
    });
});

使用两个处理程序，分别在鼠标进入div和离开div时触发。此外，您可以使用
$（this）
以当前悬停
为目标。thumb
div和
find（）
在当前悬停
下使用class
选项查找子对象

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

使用两个处理程序，分别在鼠标进入div和离开div时触发。此外，您可以使用
$（this）
以当前悬停
为目标。thumb
div和
find（）
在当前悬停
下使用class
选项查找子对象

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

使用两个处理程序，分别在鼠标进入div和离开div时触发。此外，您可以使用
$（this）
以当前悬停
为目标。thumb
div和
find（）
在当前悬停
下使用class
选项查找子对象

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

我认为您正在尝试显示和隐藏子元素。如果您将鼠标悬停在某个元素上，您可以尝试此代码，它将非常适合您的场景

试试Demo@


$（函数（）{
$（'.thumb'）。悬停(
函数（）{
$（this.find（'.option'）.toggle（）；
});
});

如果我误解了您的问题，请告诉我…
我认为您试图显示和隐藏子元素。如果您将鼠标悬停在某个元素上，您可以尝试此代码，它将非常适合您的场景

试试Demo@


$（函数（）{
$（'.thumb'）。悬停(
函数（）{
$（this.find（'.option'）.toggle（）；
});
});

如果我误解了您的问题，请告诉我…
我认为您试图显示和隐藏子元素。如果您将鼠标悬停在某个元素上，您可以尝试此代码，它将非常适合您的场景

试试Demo@


$（函数（）{
$（'.thumb'）。悬停(
函数（）{
$（this.find（'.option'）.toggle（）；
});
});

如果我误解了您的问题，请告诉我…
我认为您试图显示和隐藏子元素。如果您将鼠标悬停在某个元素上，您可以尝试此代码，它将非常适合您的场景

试试Demo@


$（函数（）{
$（'.thumb'）。悬停(
函数（）{
$（this.find（'.option'）.toggle（）；
});
});

如果我误解了您的问题，请告诉我…
是否显示内部？你的意思是外层div的子级有两个div外层带有thumb类，内层带有option类。show inner？你的意思是外层div的子级有两个div外层带有thumb类，内层带有option类。show inner？你的意思是外层div的子级有两个div外层带有thumb类，内层带有option类。show inner？你的意思是外层div的子类有两个div外层和thumb类，内层和option类。这很好。但我有多个div，带有类thumb和option，当鼠标悬停在一个div上时，它会显示所有外部div的所有内部div。然而，我只想显示从中悬停的单个内部divuser@shal您可以为所需的div提供一个额外的类名。然后选择器将类似于$（'.thumb.newclassname'）。mouseovert此操作很好。但我有多个div，带有类thumb和option，当鼠标悬停在一个div上时，它会显示所有外部div的所有内部div。然而，我只想显示从中悬停的单个内部divuser@shal您可以为所需的div提供一个额外的类名。然后选择器将类似于$（'.thumb.newclassname'）。mouseovert此操作很好。但我有多个div，带有类thumb和option，当鼠标悬停在一个div上时，它会显示所有外部div的所有内部div。然而，我只想显示从中悬停的单个内部divuser@shal您可以为其指定一个额外的类名