在悬停时显示div元素

Question

我有一个从数据库填充的div。我试图在我的div上隐藏一些项目并显示on hover这样的东西：

我制作了我的div display:none，当我悬停时我尝试了这段代码：

<script type="text/javascript">
    $(".maindiv").hover(function () {
        $(this).children().css("display","block");
    });
</script>

相同的代码，但带有子div id：

<script type="text/javascript">
    $(".maindiv").hover(function () {
        $("#more").css("display","block");
    });
</script><br/>

html代码：

<asp:Repeater ID="brandsRepeater" runat="server" DataSourceID="BrandsSqlDataSource">
                <ItemTemplate>
                    <div class="class1" style="width: 212px; text-align: center; margin-top: 15px; font-size: 10px; font-family: Tahoma; padding-bottom: 0px;" >
                        <div class="main" style="padding-bottom: 0px;">
                            <img src="path/<%# Eval("Img") %>" />
                            <div style="vertical-align: bottom; font-size: 10px; font-family: Tahoma;color:#1872AB;display:none;" id="more">
                                <a href="path/<%# Eval("Img") %>" rel="myimg" title="<%# Eval("DESCR") %>" style="color:#1872AB;">ABOUT</a>| <a href="mypage.aspx" style="color:#1872AB;">SHOP</a> | <a href="http://example.ca" target="_blank" style="color:#1872AB;">WEBSITE</a>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>

但似乎我的代码没有工作
任何想法？

谢谢

Answer 1

没有必要让JQuery实现这个，只需添加到你的css：

div.maindiv div#more {
    display: none;
}

div.maindiv:hover div#more {
    display: block;
}

然而，当显示时它会占据空间。您可以考虑使用不透明度而不是显示来避免这种情况。

Answer 2

$(".maindiv").hover(function () {
        $(this).find('#more').css("display","block");
    },function() {
  $(this).find('#more').css("display","none");
});

工作小提琴：Here

你甚至可以使用show（）; / hide（）;