Question

如何将鼠标悬停在项目列表中的项目上，属于该特定项目的隐藏div将在鼠标悬停时显示并在mouseout时消失？我对这个脚本的当前问题是只有第一个项目fadein＆amp;当我将鼠标悬停在列表中的其他项目上时，第一个项目仍然是fadein＆amp;出。请提前帮助谢谢..

我的剧本：

      <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标记，在此之前似乎有一个迷路</div>标记</tr>，您的endif和endfor应该在tr之外。

在悬停时无缝显示和隐藏div

2 个答案: