My onmouseover event is not running

Question

I have an event in <asp:imagebutton /> that I would like to show a sub menu when the mouse passes over it. As the control has no such event I have used the event within as below.

<div onmouseover="ShowHomeSubMenu()">
    <asp:ImageButton ID="HomeBttn" runat="server" ImageUrl="~/Images/Home Clicked.jpg" Style="position:absolute;left:680px;top:70px" onclick="HomeBttn_Click" height="40px" Width="90px"/>  
</div>

The ShowHomeSubMenu() function is as follows

<script type="text/javascript">
    function ShowHomeSubMenu() {
        var t = $('#<%= HomeSubMenu.ClientID %>').val();
        t.visible = true;
    }                        
</script>

This is not working and I'm not clear why.

Answer 1

Try with the following

function ShowHomeSubMenu() {
        var t = $('#<%= HomeSubMenu.ClientID %>')[0];
        t.style.visibility = "visible";
    }

OR you can try with

function ShowHomeSubMenu() {
            var $elem = $('#<%= HomeSubMenu.ClientID %>');
            $elem.show();
        }

Hope this will help

Answer 2

Try this

 function ShowHomeSubMenu() {
    $('#<%= HomeSubMenu.ClientID %>').show( "fast" );

   }

Answer 3

Try this..

function ShowHomeSubMenu() {
    $('#<%= HomeSubMenu.ClientID %>').show();
 }

Or try this.. Give class name to div..

<div class="anyname">
    <asp:ImageButton ID="HomeBttn" runat="server" ImageUrl="~/Images/Home Clicked.jpg" Style="position:absolute;left:680px;top:70px" onclick="HomeBttn_Click" height="40px" Width="90px"/>  
</div>

Then apply mouseover event on it..

<script type="text/javascript">
   $(".anyname").mouseover(function (e) {
        $('#<%= HomeSubMenu.ClientID %>').show();
   });    
</script>