ASP.NET C # OnMouseOver event to create and disappear ListBox
I have one web form with a list box and a button. When the onmousover event occurs, a list will appear; however, when the page loads, the list should not be visible. I have the following code (please excuse the background color):
Button2.Attributes.Add("onmouseout",
"this.style.backgroundColor='Blue',
ListBox3.style.display ='none'");
Button2.Attributes.Add("onmouseover",
"this.style.backgroundColor='Red',
ListBox3.style.display='block'");
This code works when listbox.visible is set to true. Unfortunately, when the page loads, the list is always displayed, which is what I want to avoid. When I set the listbox to visible = false, the above code doesn't work. I confused with postback and used if statements like if (button = red), display = block; however, to no avail. I am stuck at this point. Does anyone know what additional things I need to do to get the above code to work? I'm new to ASP.NET so I don't know if I need to do something with the html. Also, one interesting point, some of the background color of the code works flawlessly.
I am very grateful to everyone for their help.
When you set Listbox visible = "false" in server-side code, the HTML for the list is not displayed or sent to the client. So you need to make sure the listbox gets rendered, but it can't be visible on page load, or
- with original css style that makes the list invisible
or
- as it is not displayed when the DOM is loaded using JavaScript on the client.
Also take a look at Article with impressions versus visibility
source to share
You can use the jQuery javascript library to do this quite easily.
Instead of your code, you will have something like:
$('#buttonid').hover(function(){
$(this).css('background','blue');
$('#listboxid').hide('fast');
}, function(){
$(this).css('background','red');
$('#listboxid').show('fast');
});
The first hover function is mouse over and the second function is mouse. You can also animate it by showing and hiding it, which makes it look smoother.
source to share