在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可-优快云博客

在前端循环中使用鼠标悬停事件

 1 <div class="message-widget contact-widget">
 2       <!-- Message -->
 3       {% for li in row.model.all %}
 4       <a class="mose" href="#">
 5           <input type="text" style="display: none" value="{{ row.id }}"/>
 6           <div class="mail-contnet" style="width: 148px;height: 43px; ">
 7                  <div class="delebt" style="display: none; position: absolute">
 8                         <button type="button"></button>
 9                  </div>
10                  <h5>型号</h5> <span class="mail-desc" overflow="visible">{{ li.model }}</span>
11           </div>
12        </a>
13        {% endfor %}
14        <!-- Message
15        <a href="#">
16             <div class="mail-contnet" >
17                    <h5>Sonu Nigam</h5> <span class="mail-desc">pamela1987@gmail.com</span></div>
18        </a>-->
19 </div>

 1 {% block js %}
 2     <script src="../static/plugins/jquery/jquery.min.js"></script>
 3     <script>
 4         //在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可
 5         $(".mose").mouseenter(function () {
 6                $(".delebt",this).css("display","block");
 7             })
 8         $(".mose").mouseleave(function () {
 9                $(".delebt",this).css("display","none");
10             })
14     </script>
15 {% endblock %}