jquery hover function_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-19 04:11 出处：网络

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 hyperli开发者_如何学运维nk?

<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>

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>

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

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