Thursday, November 21, 2013

Show Hide Div Using Jquery in ASP.NET on Mouse hover

5 comments
Jquery mouseover and mouseout function can be used to show or hide any element. In this example on the mouse hover on asp.net button control I will show the div containing some text and on the mouse out the div will become invisible.
You can use the same jquery for other control just need to  replace the id with id of your control.
Now let us move to our example.

Jquery Code to Show/Hide Div on Mouseover and Mouseout:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js">
    </script>
    <script type="text/javascript">
        $(function () {

            $('#Button1').mouseover(function () {
                $('#dvimg').css("display", "block");
            });
            $('#Button1').mouseout(function () {

                $('#dvimg').css("display", "none");
            });


        });

    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Hover the Mouse Here to Show Div!"
            Height="50"></asp:Button>
        <div id="dvimg" style="display: none; background-color: Green; width: 450px; height: 100px;
            color: White;">
            This is the testing div shown on the mouse hover.
        </div>
    </div>
    </form>
</body>
</html>


5 comments:

  1. Sorry, what if i haven't an id for define my selector, but only a class?... how can i catch my particular point of the page that call this function ant having the effect only for this point???

    Ex. i have a GridView in asp and i want show an hidden div that contain the description of the image contained in a td of my row, how can i show the particulary div associated ath the particulaty image bhut that in haven't any id?

    Thanks you so much.....

    p.s. i can't use any tooltip!

    ReplyDelete
    Replies
    1. Hi,
      To show hide div in grid view you need to call the show and hide function on the grid view row data bound event. For that call the jquery function from the row data bound even with the parameter row index of each row. In firebug find how your the id of td is rendering on the server side and then pass the id of the td to the show and hide function in jquery .
      Hope this solve your problem . But if you still face some issue then let me know.

      Delete
    2. Thank's, I've finally solved the issue! ;)

      Delete
    3. Thank's!!! I've finally solved! ;)

      Delete
    4. Wow. This really made my day. Thanks a lot!
      JavaScript Training Courses JavaScript Training Courses Javascript Online Training Javascript Online Training

      Javascript Online Training JQuery Online Training JQuery Online Training Javascript Online Training

      Delete