javascript - HoverIntent 导致元素在页面上中断

Question

我目前正在进行的项目显示了许多参加活动的人的照片，我希望发生一个显示他们名字的悬停事件。我已经让它工作了，但它也会导致图像在这样做时变得错位。这是代码...

JS

$(document).ready(function() {
  $(".foo").hoverIntent(function() {
    $(this).siblings('.eventattendee').fadeIn();
  }, function() {
    $('.eventattendee').fadeOut();
  });
});



HTML

{{ event:get_attendees_of_event event_id="<?php echo $event['event_id']; ?>" }}
  {{ user:profile user_id="{{ attendee_id }}" }}
    <div class="wrapper">
      <a class="foo" href="/user_account/id/{{ attendee_id }}" >
        <img src="{{ profile_picture:image }}" class="bigimgsize organizersize has-tip tip-top" data-width="auto" title="{{ first_name }} {{ last_name }}"/>
      </a>
      <div class="eventattendee">
        <h1>{{ first_name }} {{ last_name }}</h1>
      </div>
    </div>
  {{ /user:profile }}
{{ /event:get_attendees_of_event }}


CSS

.wrapper {
  position: relative;
}
.eventattendee {
  display:none; 
  position: relative; 
  top: 19%;
  left: 50%;
}

谁能帮我解决这个问题？

Answer 1

这是 jsfiddle 中的简单答案：

js

    $(document).ready(function () {
    $(".foo img").hover(function () {
        $(this).next("em").animate({
            opacity: "show",
            top: "0"
        }, "slow");
    }, function () {
        $(this).next("em").animate({
            opacity: "hide",
            top: "300"
        }, "slow");
    });
});

html：注意添加了 em 标签。您当然可以撕下标题属性并添加一个 em 然后附加文本......但是为什么要经历所有这些。

<div class="wrapper"> <a class="foo" href="#">
    <img src="blah" class="bigimgsize organizersize has-tip tip-top" data-width="auto" />
<em>first last addl info</em> 
  </a>

CSS：

.foo {
  padding: 0;
  margin: 10 2px;
  float: left;
  position: relative;
  text-align: center;
}
.foo em {
  width: 190px;
  height: 35px;
  position: absolute;
  top: 300px;
  left: 6px;
  text-align: left;
  padding: 3px;
  font-weight: bolder;
  z-index: 2;
  display: none;
  color:#FFFFFF;
}

Answer 2

我以前在 onmouseover 上遇到过这个问题，它发生在没有设置绝对位置的情况下。新显示的内容占据了浏览器网格上的区域，随后的内容进一步向下移动以留出新空间。

这个简单的代码可以解决这个问题：

<div style="position:absolute; top:249px; left:435px; width:233px; height:700px;">
</div>