【发布时间】：2012-07-01 11:58:20
【问题描述】：
我有一个容器 div。在容器内部，除了文章的标题，还有一个隐藏的 div（位置：abolute，在文章标题旁边 & 容器 div 的“外部”），其中包含文章的图像和修剪后的文本。
我想要什么：用户将鼠标悬停在文章标题上：
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
结果，弹出窗口
<div class="article_popup">
在文章的标题容器旁边淡入。
如果用户没有将鼠标悬停在弹出窗口上，弹出窗口会在 1 秒后淡出。 如果他这样做了，只要用户将鼠标悬停在弹出窗口上，popu 就会保持可见，然后在 1 秒后淡出。
问题：
-1- 有许多文章容器和弹出 div 共享同一个类，所以如果只有 1 个标题悬停，所有弹出窗口都会出现。
-2- 我已经尝试过这个和类似的解决方案：
(function ($) {
$(document).ready(function(){
$('.field-title').bind('mouseenter', function() {
$('.article_popup').fadeIn();
});
$('.field-title').bind('mouseleave', function() {
$('.article_popup').fadeOut();
});
});
}(jQuery));
但这不包括用户将鼠标悬停在弹出窗口本身上的情况。
更新：http://jsfiddle.net/zThP7/14/
这是我的 HTML（您可以看到许多嵌套的 div 具有相同的类）：
<div class="container_block">
<table class="container_table">
<tbody>
<tr class="row-1">
<td class="col-1">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
<td class="col-2">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="row-2">
<td class="col-1">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
<td class="col-2">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="row-3">
<td class="col-1">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
<td class="col-2">
<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>
<div class="article_popup_container">
<div class="field-content">
<div class="article_popup">
<div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
<div class="article_popup_text">Lorem Ipsum</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
我更喜欢用自定义代码来解决这个问题，而不是建议的 jquery 插件，但如果它太复杂，一个功能性和跨浏览器兼容的插件就可以了。
【问题讨论】：
-
如果您将代码放入jsfiddle，则不是 100% 关注您的问题，这可能会有所帮助。我认为您要查找的不是
$('.article_popup')，而是使用$(this).find('.article_popup') -
我在最初的问题中添加了jsfiddle.net/zThP7/14。您建议的添加由于某种原因不起作用...
标签： jquery popup hover fadein fadeout