CODEWITHSUNDEEP
jqueryhtmljquery-animatehideshow
user1157393
user1157393

Reputation:

Showing a div when hovering over another element

Does anybody know how to go about showing a div (smoothly) when hovering over another element. e.g hover over a 'News' link and then a div with the news will appear and disappear on mouse off.

I'm guessing i would use jQuery for this but does anybody have any pointers where to start?

Upvotes: 0

Views: 2381

Answers (2)

mas-designs
mas-designs

Reputation: 7536

$('#news').hover(function(){
        $('#details').show("slow");// You can chose, slow,fast or type milliseconds
},function(){
        $('#details').hide("slow");
});

You simply use .hover() and give it 2 arguments which are functions. The first one is executed when the mouse enters the news and the second one is executed when the mouse leaves news.
With the show() and hide() method you can add some effects. You could also use fadeIn(), fadeout() Or just use fadeToggle(),toggle()

jQuery Documentation:

Upvotes: 2

Niks
Niks

Reputation: 4842

jQuery hover

With a combination of fadeIn and fadeOut (for showing/hiding the div with news smoothly) should do it.

Upvotes: 0

Related Questions