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使元素在頁面上打破

回答

相關問題