1

如何更改以下代码，以便当 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>
4

3 回答 3

1

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

$("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>
于 2010-02-03T06:29:59.967 回答
0

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");
});
于 2010-02-03T06:29:44.147 回答
0

hover 需要 2 个函数作为参数，来处理。您应该在第一个中显示并在第二个中隐藏。那么你的 div，除非它的类使它内联，否则应该是一个跨度

于 2010-02-03T06:32:04.370 回答