Jquery 鼠标悬停在超链接上的小描述窗口

我有一个sharepoint自定义列表，其中有两列URL和说明。我有一个列表Web部件，它显示sharepoint列表中的所有URL。但是当我将鼠标悬停在链接上时，我想在一个小窗口中显示该链接的描述。有人能帮我用jquery实现这个吗。Jquery应该能够从列表中读取描述。如果有什么不清楚的地方，请告诉我。

您只需要一个工具提示插件。是一个很好的做这样的工具提示。还有很多其他可用的工具提示插件。

您有两个选项来执行类似操作：

在列表Web部件中，您可以像以前一样显示URL，但也可以为描述创建div，只需隐藏它们。在鼠标悬停时，您可以使用jQuery显示信息（jQuery工具覆盖或工具提示或类似的功能）

如果您的描述很大，或者列表中有很多元素，您可能希望使用AJAX/SharePoint列表web服务来实现这一点。这有点棘手，但可能值得

您可以找到有关此方法的更多详细信息

编辑：

可以使用jQuery非常轻松地显示div。在代码中放置以下标记：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $('#divDescription').show();
      }, 
      function () {
        $('#divDescription').hide();
      }
   );
  });                                 

$（文档）.ready（函数（）{
$（'a'）。悬停(
函数（）{
$（'#divDescription'）.show（）；
}, 
函数（）{
$（'#divDescription'）.hide（）；
}
);
});                                 

阅读一些关于如何使用的教程

编辑2:
我假设您有这样的标记：

<div>
  <a>Your First link</a>
  <div id="divDescription">Your First Description</div>
</div>
<div>
  <a>Your Second link</a>
  <div id="divDescription">Your SecondDescription</div>
</div>
...

和功能。我真的建议您阅读javascript和jQuery，以便更好地了解它的工作原理。网上有很多教程可以帮你解决这个问题。
Hi，我在说明中添加了div标记并将其隐藏。然后在内容编辑器的Web部件中，我尝试使用css在鼠标悬停时显示此div。但我不确定如何做到这一点。我在内容编辑器web部件上添加了类似的内容，鼠标悬停时，我的链接将颜色更改为红色。类似地，我想添加一个：hover{divDescription{display:inline；}}我们可以这样做吗？请帮帮我。a:hover{color:#ff0000！重要；}a:hover{divDescription{display:inline；}}你好Hugo，谢谢你的回复。但是在内容编辑器webpart中添加了你的代码后，我根本看不到我的webpart。我遗漏了什么吗？嗨，雨果，我知道了。我把它移除后，我的CEWP里有一个空间，它工作得很好。非常感谢。我现在有个问题。如果我把鼠标放在一个超链接上，我会得到每个超链接的描述。如何编写jquery代码，使其仅显示悬停超链接的说明。如果有什么不清楚的地方，请帮助我，让我知道。我能控制悬停的速度吗？我的意思是，我可以慢慢地显示描述吗？您使用SharePoint 2010测试过“Jquery工具覆盖”吗？我有。SharePoints荒谬的功能区/滚动处理会弄乱偏移，因此工具提示的位置不正确。这很烦人，解决办法是计算色带的宽度/高度，然后将它们添加到偏移量中。尽管它是一个标准插件，但还是做了很多工作：-（我只让它工作了90%）。
<div>
  <a>Your First link</a>
  <div class="description">Your First Description</div>
</div>
<div>
  <a>Your Second link</a>
  <div class="description">Your SecondDescription</div>
</div>
...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $(this).parent('div').find('.description').show();
      }, 
      function () {
        $(this).parent('div').find('.description').hide();
      }
   );
  });