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

Here is the simple answer in 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标签。你当然可以撕掉标题attrib并添加一个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>

HoverIntent导致元素在页面上中断

2 个答案: