0

我有一个容器 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 插件，但如果它太复杂，一个功能性和跨浏览器兼容的插件就可以了。

4

2 回答 2

1

您需要将弹出框移动到同一个容器内，这样您只需要处理一个元素的鼠标移出。检查第一个，它至少会给你一个起点。http://jsfiddle.net/zThP7/15/

于 2012-07-01T12:53:12.417 回答
0

我认为这就是您要寻找的东西；）

https://stackoverflow.com/a/1670561/472406

您唯一需要更改的是为弹出元素添加 mouseenter 事件并清除超时，并为弹出窗口的 mouseleave 添加超时以隐藏弹出窗口

由于在标题元素中，如果用户从弹出窗口转到标题，则必须清除超时，弹出窗口不会消失

于 2012-07-01T12:57:04.830 回答