ansaurus

Question

jquery hover function

Answer 1

A:

hover() takes two arguments: a callback for when it's activated and another when its deactivated so:

$("a.moreDetails").hover(function() {
  $(this).next("div.details").stop().show("fast");
}, function() {
  $(this).next("div.details").stop().show("slow");
});

You'll note that I'm calling stop(). That's a good habit to get into when using animations otherwise you can get unintended visual artifacts from queueing animations.

Edit: Appearing next to the element has some difficulties. You can change the CSS:

div.details { display: inline; }

and it will appear next to the link but then the jQuery effects won't really work correctly because they tend to set things to display: block. If you don't want or need the effect you can just use a class:

div.details { display: inline; }
div.hidden { display: none; }

and then:

$("a.moreDetails").hover(function() {
  $(this).next("div.details").addClass("hidden");
}, function() {
  $(this).next("div.details").removeClass("hidden");
});

cletus 2010-02-03 06:29:44

Thanks...but how to make it appear next to the hyperlink and not below

Hulk 2010-02-03 06:35:08

@Hulk: see my update.

cletus 2010-02-03 06:46:28

Thanks..........................

Hulk 2010-02-03 06:49:40

Answer 2

+1 A:

jQuery's hover method takes two function inputs:

$("a.moreDetails").hover(
  function(){
    $(this).next().show('fast');
  },
  function(){
    $(this).next().hide('fast');
  }
);

You also appear to be missing your closing </head> tag. Getting your element to appear next to your link will require some markup-changes, javascript manipulation, or some css rules. You could make this minor change:

<a href="#" class="moreDetails">(details)</a>
<span class="details">User 1</span>

Jonathan Sampson 2010-02-03 06:29:59

Thanks...but how to make it appear next to the hyperlink

Hulk 2010-02-03 06:33:06

@Hulk: You can change it from a `div` to a `span`, or you can add `display:inline` to its styling.

Jonathan Sampson 2010-02-03 06:36:14

Thanks......................

Hulk 2010-02-03 06:41:13

@Hulk: You're welcome. Keep up the great work!

Jonathan Sampson 2010-02-03 06:41:54

Answer 3

A:

hover takes 2 functions as parameters, to handle over and out. you should show in the first and hide in the second. then your div, unless its class makes it inline, should probably be a span

Scott Evernden 2010-02-03 06:32:04

ansaurus

tags:

views:

answers:

jquery hover function

related questions