0

当谈到 jQuery 时，我是一个完全的新手，我知道这个网站上有很多与我相似的问题，但我找不到与我想要的足够接近的问题。

我想要的是当鼠标悬停在图像上时，图像的不透明度会降低（或完全淡出）并且文本会淡入该图像所在的顶部。我还希望该文本成为同一页面上某个位置的链接（但我确信我可以做到这一点）。

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

谢谢！

4

1 回答 1

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(); 
});

小提琴

更新脚本：

$(".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(); 
});

更新小提琴

于 2013-07-31T10:01:15.460 回答