在悬停时显示 div 元素 [重复]答案

【问题标题】：show div elements on hover [duplicate]在悬停时显示 div 元素 [重复]
【发布时间】：2014-05-05 11:14:31
【问题描述】：

我有一个从数据库填充的 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>

但似乎我的代码不起作用
有什么想法吗？

谢谢

【问题讨论】：

提供相关的 HTML 标记。顺便说一句，您只能将 CSS 用于该行为
你的问题似乎不完整..请改进它，以便其他人可以得到更多的想法..提供更多你尝试过的代码
呼应其他 cmets。最好的办法是设置一个jsfiddle.net，但它不起作用。你几乎肯定会很快得到一个工作分叉。

标签： jquery html css

【解决方案1】：

不需要 JQuery 来实现这个，只需添加到你的 css 中：

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

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

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

【讨论】：

谢谢你，我尝试的第一件事！
实际上应该这样做，但我已经根据 OP 所遵循的内容发布了我的解决方案。但我仍然建议只这样做。

【解决方案2】：

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

一个工作小提琴：Here

你甚至可以使用 show(); / 隐藏();

【讨论】：