CODEWITHSUNDEEP
jqueryhtmlcssmouseover
Hulk
Hulk

Reputation: 34160

jquery hover function

How does the following code need to be changed so when the onmouseover event fires up a div appears on the right side of the hyperlink?

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
$('a.moreDetails').hover(function() {
$(this).next().toggle('fast');
});
});

</script>  

<body>
<a href="#" class="moreDetails">(details)</a>
<div class="details">User 1</div>
</body>
</html>

Upvotes: 1

Views: 1267

Answers (3)

cletus
cletus

Reputation: 625007

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");
});

Upvotes: 0

Scott Evernden
Scott Evernden

Reputation: 39940

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

Upvotes: 0

Sampson
Sampson

Reputation: 268324

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>

Upvotes: 1

Related Questions