Question

这是我的代码，但没有任何反应。当我将鼠标悬停在锚标记上时，我想显示一个div，就像一个弹出窗口。

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

<head runat="server">
    <title></title>
    <script src="script/jquery-1.11.1.min.js"></script>
    <script>
        $(".hoverdetails").on({
            mouseover: function() {
                $(".romdetails").stop().show(1000);
            },

            mouseout: function() {
                $(".romdetails").stop().hide(1000);
            }
        })
    </script>
</head>

<form id="form1" runat="server">
<asp:DataList ID="dtlRoomCart" CssClass="romcrt" HorizontalAlign="center" runat="server" ShowHeader="False"
                                                                            Width="720px" OnItemDataBound="dtlRoomCart_ItemDataBound">
                                                                            <ItemTemplate>
        <a href="#" class="hoverdetails">RoomDetails</a>
    <div class="romdetails" style="background-color:blue;width:300PX;height:300PX;display:none">
    </div>
                                                                              </ItemTemplate>
    </asp:DataList>
</form>

Answer 1

您需要在加载DOM时运行代码 - 将代码放在文档就绪处理程序中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function() { // < handler start
        $(".hoverdetails").on({
            mouseenter: function() {
                $(".romdetails").stop().show(1000);
            },
            mouseleave: function() {
                $(".romdetails").stop().hide(1000);
            }
        })
    }); // < handler end
</script>

<form id="form1" runat="server">
    <a href="#" class="hoverdetails">RoomDetails</a>
    <div class="romdetails" style="background-color: blue; width: 300px; height: 300px; display: none;"></div>
</form>

Answer 2

您的代码在以下小提琴中正常运行：https://jsfiddle.net/nileshmahaja/uxtvnp9s/1/

我做的唯一改变是将代码放入document.ready function

<强> jquery的

$(document).ready(function(){
$(".hoverdetails").on({
            mouseover: function () {
                $(".romdetails").stop().show(1000);
            },

            mouseout: function () {
                $(".romdetails").stop().hide(1000);
            }
        })

});

Answer 3

demo 在Document.ready

中完成

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() { 
            $(".hoverdetails").on({
                mouseenter: function() {
                    $(".romdetails").stop().show(1000);
                },
                mouseleave: function() {
                    $(".romdetails").stop().hide(1000);
                }
            })
        }); 
    </script>

    <form id="form1" runat="server">
        <a href="#" class="hoverdetails">RoomDetails</a>
        <div class="romdetails" style="background-color: blue; width: 300px; height: 300px; display: none;"></div>
    </form>

我希望在JQUERY上悬停在锚标签上时显示div

3 个答案: