2

私のhtml構造がスパン内のリンクのホバーでdivを更新するためのJquery関数を追加しようとしています

  <ul><li>
      <div class="timeline">


         <span>by</span>
         <span class="vcard">
           <a class="underline user-link" href="/users/aruna">Aruna </a>
         </span>
         <div style="display: none;" class="image_hover">
               Student
               <p>
                 <a onclick="" href="#">Show additional details</a>
                 <a href="#">view</a>
                 <p>Employee ID : </p>
                 <p>Project Name: </p>
                 <p>Project Role : r</p>
                 <p>Supervisor Name : </p> 
              </p>
         </div>

         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
    <li>
      <div class="timeline">


         <span>by</span>
         <span class="vcard">
           <a class="underline user-link" href="/users/jasmine">jasmine </a>
         </span>
         <div style="display: none;" class="image_hover">
               Professor
               <p>
                 <a onclick="" href="#">Show additional details</a>
                 <a href="#">view</a>
                 <p>Employee ID : </p>
                 <p>Project Name: </p>
                 <p>Project Role : r</p>
                 <p>Supervisor Name : </p> 
              </p>
         </div>
         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
 </ul>

私が書いたjQueryは

のように書きました

   jQuery(document).ready(function(){
      var _selectedLinkEl = null;
      var _detailEl = null;
      var body = jQuery("body");
      var elem=null;
jQuery(".user-link").mouseover(function(event) {
    _selectedLinkEl = this;
    _detailEl=jQuery(event.target).parent().next();
   //_detailEl.show();
  _detailEl.fadeIn("slow");
  elem=jQuery(this).parent().next();
 _href=jQuery(this).attr('href').split("/")[2];

jQuery.post('/users/user_detail/?name='+_href,
     function(data){
    //elem.html(data).show();
            elem.html(data).fadeIn("slow");
     });//post

 body.mouseover(_bodyMouseOverFunction);
  }); // user-link

var _bodyMouseOverFunction = function(event) {
        if(event.target != _selectedLinkEl &&      
           event.target != _detailEl &&
           jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {

      //_detailEl.hide();
    _detailEl.fadeOut("slow");
     body.unbind("mouseover", _bodyMouseOverFunction);
   }
 };// mouseover

});

上記の jquery は、イメージ ホバー div を更新し、fadeIn によって div を表示しますが、常にフェードアウトを取得します。

マウスのホバーが div(image_hover) またはボディ要素の外にある場合にのみ、DIV image_hover をフェードアウトしようとしています..

ケースでは、マウスがリンクまたは div または div (image_hover) 内の要素のいずれかにある場合、Div はフェードアウトしないはずです。

これについての提案をしてください/。

その方法は??

4

1 に答える 1

0

あなたの HTML は問題の一部です。開いたままにする必要がある領域からこれを引き出すには、トリガータグ内に存在する必要がありますが、他のことにも気付きました:

  • 「image_hover」を含む DIV はデフォルトで非表示になっています (そのため、動作しません)。
  • HTML には、イメージ ホバーとして使用するイメージ タグがありません (奇妙に思えました)。
  • 2 つの明確に異なるオブジェクト (トップ DIV と「約 1 日前」の SPAN) で「タイムライン」CSS クラスを使用しています...タイムラインのように見えるのは 1 つだけです。
  • トグルとして使用できる可能性を暗示する 2 つのリンク (アンカーなど) があります: 「追加の詳細を表示」と「表示」(どちらですか?)
  • 各リンクトグルは、トグルされるものの中にあります。
  • byという単語を含めるためだけにSPANがあります（必要ありません）
  • 「タイムライン」タグをトグル領域の外に移動することを検討してください。

そのため、私はあなたの HTML を変更し、以下の潜在的な解決策を作成しました。これにより、「詳細」エリアを開くという望ましい動作が実行されます (ホバリング中も開いたままになります)。

さらに、「詳細」領域を非表示にする必要はありませんが、とにかく残しておきます。

それまでの間、次の潜在的な解決策を検討してください。

<html>
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .vCard
        {
            font-family: Arial;
        }
        .vCard a
        {
             text-decoration: none;
        }
        .vCard a.owner
        {
             color: Green;
        }
        .vCard span.timeline
        {
            color:Navy;
        }
        .vCard span.timeline div.type
        {
            display: none;
        }
        .vCard span.timeline div.type div.details
        {
            display: none;
            margin-left: 20px;
        }
    </style>

    <script type="text/javascript">

        function hoverIn() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeIn('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeIn('Fast');
            });
        }

        function hoverOut() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeOut('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeOut('Fast');
            });
        }

        jQuery(document).ready(function() {

            var context = jQuery('#myList');

            // This will target the SPECIFIC timeline object(s).
            jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ul id="myList">
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/aruna">Aruna </a>
                    <span class="timeline">
                        about 1 hours ago
                        <div class="type">
                            <a href="#">Student</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/jasmine">Jasmine </a>
                    <span class="timeline">
                        about 2 days ago
                        <div class="type">
                            <a href="#">Professor</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>
于 2011-03-31T12:16:56.207 に答える