Question

我有一个容器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-有许多物品容器和popup div共享同一个类，因此如果只有一个标题被悬停，则会显示所有弹出窗口。

-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插件，但是如果它太复杂了，那就是功能性的＆amp;跨浏览器兼容的插件可以。

Answer 1

你想要在同一个容器中移动popover，这样你只需要处理一个元素的mouseout。检查第一个，它至少会给你一个起点。 http://jsfiddle.net/zThP7/15/

Answer 2

我认为这就是你要搜索的内容;）

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

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

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

将鼠标悬停在一个div上，另一个div淡入并在用户将鼠标悬停在其上时仍然可见

2 个答案: