使用ID分隔类

时间:2013-01-16 12:57:10

标签: jquery

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

});

6 个答案:

答案 0 :(得分: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');
  });

});

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

答案 1 :(得分:1)

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

<强> Live demo

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

答案 2 :(得分: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');
  });

});

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

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

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

答案 3 :(得分:1)

尝试使用儿童()DEMO:http://jsfiddle.net/gDZey/

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

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

答案 4 :(得分: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代替mouseentermouseout

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

答案 5 :(得分: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');
   }
);