HoverIntent使元素在页面上打破

我目前正在处理的项目显示许多人正在参加活动的图片，我希望发生显示其名称的悬停事件。我已经得到这个工作，但它也导致图像变得错位。这里是代码...HoverIntent使元素在页面上打破

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%; 
}

任何人都可以帮我解决这个问题吗？

来源

2013-04-04 broadbent

是我们应该神奇地知道知道你是怎么CSS设置要显示它？您将需要从流中移除元素。猜测一些绝对的定位将有助于那里。 – epascarello 2013-04-04 17:19:17

您的eventattendee div破坏了布局，请尝试将其设置为绝对位置，以免混淆DOM流。 – 2013-04-04 17:19:19

epasarello：添加了相关的CSS文件。我的坏 – broadbent 2013-04-04 17:21:00

Here is the simple answer in jsfiddle：

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

来源

2013-04-05 00:28:57

我有点疯狂，并使用一些流沙，并允许基于标签和一些疯狂的动画过滤事件。和你的滑动细节。此解决方案使用无序列表而不是divs ... http://jsfiddle.net/Ceberjetx/pP37F/ – 2013-04-05 00:37:30

我遇到这一问题的onmouseover之前，当绝对位置尚未确定它发生。新显示的内容在浏览器网格上占用区域，随后的内容进一步向下移动以允许新的空间。

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

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

来源

2013-04-20 09:12:40

HoverIntent使元素在页面上打破

回答

相关问题