Question

I am a complete beginner to ASP.NET and need to know how do I create the hover effect like in the following website:-

http://www.viking.com/Chairs/Chairs.asp

There’s this link “Shopping cart” in the upper right hand corner of the web page…when you move your mouse over it, a text box is shown..

How do I create that effect ?

I just need an idea like what do I search for? ..what all code do I need to include in my web page??

Please help ? Thanks

Answer 1

It looks to be more about jquery than asp.net. Give the element you want the box to appear from an id (foo) and create another, hidden, div with the data you want to show onmouseover (bar).

For the element that you want to cause the box to appear add a mouseover event using JQuery eg:

$(document).ready(function() {
  $("#foo").live("mouseover", function () {
     $("#bar").slideDown("fast");
  });
  $("#foo").live("mouseout", function () {
     $("#bar").hide();
  });
});

<div id="foo">MOUSOVER ME FOR BOX</div>
<div id="bar" style="visibility:hidden;">HIDDEN CONTENT</div>

This should do a basic slidedown effect on mouseover for you and should hide it on mouse out. Take a look at http://api.jquery.com/ to get a better understanding of what’s happening and you can do with JQuery.

Edit – You’ll need to include the JQuery js files on your page, see here http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery