Question

关于jQuery，我是一个完整的新手，我知道这个网站上有很多类似于我的问题，但我找不到一个足够接近我想要的东西。

我想要的是当鼠标悬停在图像上时，图像的不透明度降低（或者它完全淡出）以及文本在图像所在位置的顶部淡入。我也希望该文本能够链接到同一页面上的位置（我确信我可以管理它）。

如果有人可以在我的jsfiddle中放一些东西，我将非常感激，因为我还没有能力将jQuery现有的例子修改为我需要的东西。

谢谢！

Answer 1

试试这个，可能会对你有所帮助：

HTML：

<img class="image" src="" alt="TestImage"></img><a id="link">This is the link content</a>

CSS：

 #link {
    display: none;
 }

脚本：

$(".image").hover(function(e) {
      e.preventDefault();
      $(this).fadeOut('slow', function(e) {
          $('#link').fadeIn('slow');
      });
});

 $("#link").mouseout(function(e) {
      e.preventDefault();
      $(this).fadeOut('slow', function(e) {
          $(".image").fadeIn('slow');
      });
});

$( document ).ready(function() {
    $(".image")[0].hover(); 
});

Fiddle

更新的脚本：

$(".image").hover(function(e) {
      e.preventDefault();
      $(this).stop().fadeOut('slow', function(e) {
          $('#link').stop().fadeIn('slow');
      });
});

$("#link, .image").mouseout(function(e) {
      e.preventDefault();
      if($(this).is("img"))
      {
          $(".image").stop().fadeOut('slow', function(e) {
              $('#link').stop().fadeOut('slow', function(e) {
                  $(".image").stop().fadeIn('slow');
              });
          });
      }
      else
      {
          $('#link').stop().fadeOut('slow', function(e) {
              $(".image").stop().fadeIn('slow');
          });
      }
});

$( document ).ready(function() {
    $(".image")[0].hover(); 
});

Updated Fiddle

悬停图像上的jQuery改变不透明度/淡出和文本淡入

1 个答案: