悬停时无缝显示和隐藏 div

Question

如何将鼠标悬停在项目列表中的项目上，并且属于该特定项目的隐藏 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>

Answer 1

您不能在一个页面上拥有多个具有相同 id 的元素。你需要把它变成一个类。要显示属于您悬停的此特定元素的项目，您需要这样做

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

});

Answer 2

您需要以相对的方式找到描述。这是一种选择：

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

另外，作为旁注，您的 HTML 似乎无效。这可能不会导致此问题，但在此解决方案起作用之前需要修复它。特别是，您的第一个td 在下一个td 之前没有结束标签，您已经嵌套了td 标签，在</tr> 之前似乎有一个杂散的</div> 标签，而您的@987654328 @ 和 endfor 应该在 tr 之外。