jquery - 将 fading "tooltips"添加到网站

Question

我是一名网络开发新手，我刚刚完成了我的第一个网站。它非常简单，并且缺乏功能。你可以在这里看到它:http://www.amritayalur.com .在右侧，我在一列中有一些社交媒体图标。我想使用 jQuery 来显示一些标记图标的文本。例如，我认为如果将鼠标悬停在 Twitter 图标上时，左侧显示“Twitter”的一些小文本会淡入并带有指向该图标的箭头，那将非常酷。这可能吗？

谢谢!

Answer 1

http://jsfiddle.net/566kZ/

类似的东西:

<style>
.tooltip {
[various styles]
opacity:0;
}
</style>

<script>
$(document).ready(function() {
  $(".socialLink").hover(
    function () { 
      $(this).find(".tooltip").stop().animate({opacity: 1},500);
    },
    function () { 
      $(this).find(".tooltip").stop().animate({opacity: 0},500);
  });
});
</script>

<a href="twitter.com" class="socialLink">
<img src="twitter.jpg" />
<div class="tooltip">Twitter</div>
</a>

通过一些相当简单的工具提示样式，您可以实现您正在寻找的效果。