0

コンテナ div があります。コンテナー内には、記事のタイトルとは別に、記事の画像とトリミングされたテキストを含む非表示の div (記事のタイトルの隣 & コンテナー div の「外側」の位置: abolute) があります。

私が欲しいもの: ユーザーは記事のタイトルにカーソルを合わせます:

<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

ポップオーバーを同じコンテナー内に移動して、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 に答える