Saturday, September 22, 2012

Asp.Net jQuery href mouse hover Event Handler


The jQuery library provides various options to work with href links, in this post Asp.Net jQuery href mouse hover Event handler, we shall see on how to capture the mouse hover event of a Hyperlink controls using jQuery.

We can handle the mouse hover event of a href control using jQuery as follows.

$('#lnkGoogle').hover(function() {
   alert("Hover on Link");
});


Here is a full example

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Links (a href)</title>
    <link
      type="text/css"
      href="Stylesheet.css"
      rel="Stylesheet" />
    <script
      type="text/javascript"
      src="JavaScript/jquery-1.7.2.js"></script>
    <script
      type="text/javascript"
      language="javascript">
        $(document).ready(function() {
            $('#lnkGoogle').hover(function() {
                alert("Hover on Link");
            });
        });
    </script>       
</head>
<body>
    <form id="frmLinks" runat="server">
        <b>Links (a Href)</b><br />
        <a id="lnkGoogle"
            href="http://www.google.com"
            target="_blank">Google</a>
        <br />
        <a id="lnkYahoo"               href="http://www.yahoo.com">Yahoo</a><br />
        <a id="lnkFacebook" href="http://www.facebook.com">Facebook</a><br />
        <br /><br />
        <b>Hyperlinks (asp:HyperLink)</b><br />
        <asp:HyperLink
            ID="lnkMicrosoft"
            runat="server"
            Text="Microsoft"
            NavigateUrl="http://www.microsoft.com/">
        </asp:HyperLink><br />
        <asp:HyperLink
            ID="lnkMSDN"
            runat="server"
            Text="MSDN"
            NavigateUrl="http://msdn.microsoft.com/en-US/">
        </asp:HyperLink> 
        <br /><br />
        <asp:Button
            ID="cmdSet"
            runat="server"
            Text="Set"
            Width="100"/>           
    </form>
</body>

Search Flipkart Products:
Flipkart.com

No comments: