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

时间:2023-03-08 20:56:35

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

 <div class="message-widget contact-widget">
<!-- Message -->
{% for li in row.model.all %}
<a class="mose" href="#">
<input type="text" style="display: none" value="{{ row.id }}"/>
<div class="mail-contnet" style="width: 148px;height: 43px; ">
<div class="delebt" style="display: none; position: absolute">
<button type="button"></button>
</div>
<h5>型号</h5> <span class="mail-desc" overflow="visible">{{ li.model }}</span>
</div>
</a>
{% endfor %}
<!-- Message
<a href="#">
<div class="mail-contnet" >
<h5>Sonu Nigam</h5> <span class="mail-desc">pamela1987@gmail.com</span></div>
</a>-->
</div>
 {% block js %}
<script src="../static/plugins/jquery/jquery.min.js"></script>
<script>
//在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可
$(".mose").mouseenter(function () {
$(".delebt",this).css("display","block");
})
$(".mose").mouseleave(function () {
$(".delebt",this).css("display","none");
})
</script>
{% endblock %}