CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ahmeaad
ahmeaad

Reputation: 85

I want to display div when hover on anchor tag by JQUERY

This my code but nothing happens with it. When I hover over the anchor tag I want to display a div like a popup window. 

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

Upvotes: 1

Views: 2428

Answers (3)

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

demo Do it within 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>

Upvotes: 0

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

Your code working properly for me in the following fiddle : https://jsfiddle.net/nileshmahaja/uxtvnp9s/1/

The only change I did is I put your code into document.ready function

jquery

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

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

});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

You need to run your code when the DOM has loaded - place your code in a document ready handler:

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

Upvotes: 1

Related Questions