Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to apply jQuery slide down on a button when user hovers over a div element?

How to apply jQuery slide down on a button when user hovers over a div element?

Problem

I have a view in which I there is a repeater control wrapped with a div. I would like to Slide down a button when a user hovers over this div.

How would I acheive this using Jquery Slide down??

Thanks

Here is the Div Element Id like to apply the slide down to:

&nbsp See all events

And here is the repeater div Id like to apply the onmouseover/hover to:

' runat="server" />
' CssClass ="magnify" ToolTip="Click on Image to enlarge. Click back to minimize." />


' CssClass="TitleStyle" ToolTip="Click to view details of the Announcement." />

Problem courtesy of: user1266515

Solution

$("#yourdiv").hover(
  function () {
    $("#yourbutton").slideDown('slow');
  }, 
  function () {
    $("#yourbutton").slideUp('slow');
  }
);

1st function is "mouse enter" event. 2nd function is "mouse leave" event. More info here: http://api.jquery.com/hover/

http://api.jquery.com/slidedown/

http://api.jquery.com/slideup/

Solution courtesy of: Mustafa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to apply jQuery slide down on a button when user hovers over a div element?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×