在懸停時無縫顯示和隱藏div

如何將鼠標懸停在項目列表中的某個項目上，並且屬於該特定項目的隱藏div會在鼠標懸停並在鼠標移出時消失時顯示？目前我在這個腳本中遇到的問題是，只有第一項淡出&，但是當我將鼠標懸停在列表中的其他項目上時，第一項仍然是淡出&的唯一目標。請幫助在此先感謝..在懸停時無縫顯示和隱藏div

我的腳本：

 <script type="text/javascript"> 

$(document).ready(function(){ 

    $(".title").hover(function(){ 
       $("#projdesc").fadeIn(); 
      }, function(){ 
       $("#projdesc").fadeOut(); 
      }); 

    }); 

     </script>

我的html：

    {% for job in job_list %} 
        {% if job.is_active %} 
        <tr class="{% if forloop.counter|divisibleby:2 %}oddRow{% else %}evenRow{% endif %}"> 
         <td width="40%"> 
         <a href="{{ job.get_absolute_url }}"> 
          <div class="title"> 
           {{ job.title }} 
          </div> 
         </a> 
         <div id="projdesc" class="proj_desc"> 
          {{ job.description|truncatewords:28 }} 
         </div> 
         <td width="11%" valign="top"> 
          <div class="posted_by"> 
           {{ job.job_creator.nickname }} 
          </div> 
         </td> 
         <td width="17%" valign="top"> 
          <div class="proj_cat"> 
           {{ job.skill.name }} 
          </div> 
         </td> 
         <td width="8%" valign="top"> 
          <div class="weekly_rate"> 
           {{ job.budget|floatformat:0 }} 
          </div> 
          <td width="10%" valign="top"> 
           <div class="proj_pDate"> 
            {{ job.created_at|date:"j/m/Y" }} 
           </div> 
          </td> 
          <td width="7%" valign="top"> 
           <div class="proj_LDate"> 
            {{ job.get_bid_time_left }} 
           </div> 
          </td> 
          <td width="7%" valign="top"> 
           <div class="bids"> 
            {{ job.get_no_of_bids }} 
           </div> 
          </td> 
         </td> 
         </div> 
         {% endif %} 
         {% endfor %} 
        </tr>

來源

2011-03-05 pivotal developer

你需要找到一個相對的方式描述。這裏有一個選項：

$('.title').hover(function(){ 
    $(this).closest('tr').find('.proj_desc').fadeIn(); 
}, function(){ 
    $(this).closest('tr').find('.proj_desc').fadeOut(); 
});

另外，作爲一個附註，你的HTML看起來不是有效的。這可能是而不是導致此問題，但它需要解決之前此解決方案將工作。特別是，你的第一個td沒有下一td之前關閉標籤，你嵌套td標籤，似乎只是</tr>之前是一個流浪</div>標記，且endif和endfor應該是tr之外。

來源

2011-03-05 14:34:34

嘿感謝，似乎無法讓你的代碼雖然工作.. – 2011-03-05 14:52:26

現在這個工作元素particalar的項目，這是由於從早先的錯誤中找到錯誤。find（'proj_desc'）應該是find（'。proj_desc'）。感謝您的快速回復 – 2011-03-05 15:01:19

是的，對於我原來的答案中的錯字感到抱歉。爲了更深入的理解，我建議瀏覽http://api.jquery.com/category/traversing/上的所有功能。實際上還有其他很多好方法來解決您的問題。一種是根據存儲在數據庫中的ID給每個隱藏的div一個唯一的ID。 – 2011-03-05 18:03:56

你不能在一個頁面上有多個具有相同ID的元素。你需要把它變成一個班級。並展示屬於你徘徊，你需要做這樣的

$(".title").hover(function(){ 
      $(this).closest("tr").find(".projdesc").fadeIn(); 
     }, function(){ 
      $(this).closest("tr").find(".projdesc").fadeOut(); 
     }); 

});

來源

2011-03-05 14:34:53

在懸停時無縫顯示和隱藏div

回答

相關問題