Question

如何更改以下代码，以便当onmouseover事件触发时，超链接右侧会显示div？

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

Answer 1

jQuery的悬停方法有两个函数输入：

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

您似乎也错过了结束</head>标记。让元素出现在链接旁边需要进行一些标记更改，javascript操作或一些css规则。你可以做这个小改动：

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

Answer 2

hover()有两个参数：激活时的回调和激活时的回调：

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

你会注意到我正在呼叫stop()。在使用动画时这是一个很好的习惯，否则你可能会从排队动画中获得意想不到的视觉效果。

编辑：元素旁边出现一些困难。您可以更改CSS：

div.details { display: inline; }

它将出现在链接旁边但是jQuery效果将无法正常工作，因为它们往往将事物设置为display: block。如果您不想要或不需要效果，可以使用一个类：

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

然后：

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

Answer 3

hover需要2个函数作为参数，来处理over和out。你应该在第一个中显示并隐藏在第二个中。然后你的div，除非它的类使其内联，应该是一个跨度

jquery悬停功能

3 个答案: