исчезновение в JQuery

Question

Я пытаюсь добавить функцию Jquery для обновления div при наведении ссылки на промежуток моя HTML структура

  <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 для наведения изображения и отображает div при помощи fadeIn, но постоянно затухает.

Я пытаюсь скрыть DIV image_hover, только если моя мышь находится вне div (image_hover) или каких-либо элементов тела ..

В тех случаях, когда моя мышь находится на ссылке или на div или на любом из элементов внутри div (image_hover), Div не должен исчезать.

Пожалуйста, дайте предложения для этого /.

Как это сделать ??

Answer 1

Ваш HTML является частью проблемы. Чтобы удалить это из области, которая должна оставаться открытой, нужно жить в пределах вашего тега триггеров, но я заметил и другие вещи:

• DIV, содержащий "image_hover", по умолчанию скрыт (поэтому не будет работать).
• В вашем HTML нет тега изображения, который можно было бы использовать для наведения изображения (просто показалось странным).
• Вы используете CSS-класс "timeline" для 2 совершенно разных объектов (верхний DIV и в SPAN "около 1 дня назад") ... только 1 кажется временной шкалой.
• У вас есть 2 ссылки (например, якоря), которые подразумевают возможное использование в качестве переключателей: «Показать дополнительные сведения» и «просмотреть» (что это?)
• Каждый из ваших переключателей ссылок находится внутри того, что должно быть переключено.
• У вас есть 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>