Question

我有两张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');
    });

});

Answer 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').mouseout(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

与代码的不同之处只是将其添加到show / hide函数以与实际元素相关。

Answer 2

在上下文中传递当前对象以在后代中处理元素。

<强> Live demo

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

Answer 3

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

});

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

此外，请参阅我已将mouseout替换为mouseleave，其效果应优于mouseout（文字不会上下跳跃。区别在于mouseout会发生即使鼠标转到子元素，如果从元素移动到子元素，也不会发生mouseleave

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

Answer 4

尝试使用儿童（）DEMO：http://jsfiddle.net/gDZey/

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

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

Answer 5

$(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代替mouseenter和mouseout。

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

Answer 6

你可以使用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');
   }
);

使用ID分隔类

6 个答案: