如何解决JS 添加活动悬停项列表
我有列表项
.thumbs {display: flex;}
.thumbs .item {width: 150px; height: 150px; margin-right: 10px; border: 1px solid black}
.thumbs .item.active {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbs">
<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
如何悬停 .thumbs .item
将活动添加到 item:hover
并清除活动项目 (1)。
如果没有悬停任何项目,最后悬停活动项目。
同:
悬停item(2)
:添加活动item(2)
- 清除活动item(1)
&& 如果不悬停任何项目或悬停在.thumbs
元素之外,则粘贴活动项目(2)。
我使用 js 悬停活动但不悬停清除所有活动。
$(document).ready(function() {
$(".thumbs .item").hover(
function() {
$(this).addClass('active');
},function() {
$( this ).removeClass('active');
}
);
});
解决方法
在添加active
类之前不要忘记删除所有类然后将其添加到当前元素:
$(".item").removeClass('active');
$(this).addClass('active');
对于最后一项,对 mouseout
使用 .thumbs
事件。当元素未悬停时,您需要保留最后一个 Element
(lastElemtHoverd = $(this);
)
$(document).ready(function () {
var lastElemtHoverd;
$(".thumbs").mouseout(function () {
lastElemtHoverd.addClass('active');
});
$(".thumbs .item").hover(
function () {
$(".item").removeClass('active');
$(this).addClass('active');
},function () {
$(this).removeClass('active');
lastElemtHoverd = $(this);
}
);
});
.thumbs {
display: flex;
}
.thumbs .item {
width: 150px;
height: 150px;
margin-right: 10px;
border: 1px solid black
}
.thumbs .item.active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbs">
<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。