0

我有两张图片，其中 DIV 在悬停时显示，显示一些用户信息。它的外观符合预期，但我不知道如何只在悬停的图像上显示信息。

我怎样才能做到这一点？

这是代码的实时工作示例：http: //jsfiddle.net/uvHw4/

原始 JavaScript 代码：

$(document).ready(function() {
    $('.start_profile_container_text').hide();
    $('.start_profile_container').mouseenter(function() {
        $('.start_profile_container_text').show('slide', { direction: "down"} ,'fast');
    });

    $('.start_profile_container').mouseout(function() {
        $('.start_profile_container_text').hide('slide', { direction: "down"} ,'fast');
    });

});
4

6 回答 6

2

将您的脚本更改为：

$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });

  $('.start_profile_container').mouseout(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

与您的代码的区别只是将 this 添加到显示/隐藏函数以与实际元素相关。

于 2013-01-16T13:02:38.320 回答
1

将上下文中的当前对象传递给后代中的元素。

现场演示

 $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });
于 2013-01-16T13:01:00.510 回答
1 
$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });

  $('.start_profile_container').mouseleave(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

使用上下文.start_profile_container_text仅在悬停的 div 内查找：$('.start_profile_container_text', this)这是一个指向当前 div 的元素。

另外，请参阅我已经替换mouseout为mouseleave应该比哪个更好mouseout（文本不会上下跳跃。不同之处在于，mouseout即使鼠标移动到子元素也会发生这种情况，并且mouseleave如果从元素移动到其子元素则不会发生）

演示：http: //jsfiddle.net/uvHw4/1/

于 2013-01-16T13:01:53.130 回答
1

尝试使用 children() 演示：http: //jsfiddle.net/gDZey/

$(this).children('.start_profile_container_text').show('slide', {
  direction: "down"
}, 'fast');

我建议在这种情况下使用http://api.jquery.com/hover/。

于 2013-01-16T13:02:35.577 回答
1 
$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').hover(function () {
    $(this).find('.start_profile_container_text').show('slide', {
      direction: "down"
    }, 'fast');
  },

  function () {
    $(this).find('.start_profile_container_text').hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

此代码工作正常。我建议使用hover而不是mouseenterand mouseout。

这是演示http://jsfiddle.net/uvHw4/3/

于 2013-01-16T13:04:10.797 回答
0

你可以使用hover()而不是两个函数..

$('.start_profile_container').hover(
   function () {
      $('.' + this.className +'_text', this).show('slide', { direction: "down"}, 'fast');
   },
   function () {
      $('.' + this.className +'_text', this).hide('slide', {direction: "down"}, 'fast');
   }
);
于 2013-01-16T13:06:26.963 回答