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>