JS 添加活动悬停项目列表答案

【问题标题】：JS add active hover item listJS 添加活动悬停项目列表
【发布时间】：2021-07-25 08:14:58
【问题描述】：

我有列表项

.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');
    }
);
});

【问题讨论】：

标签： javascript jquery-hover mousehover

【解决方案1】：

在添加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>

【讨论】：

如何将.thumb悬停在.item悬停状态？
@DinhCode 这是您问题的一部分。你说。 And if not hover any item stick active item last hover.
@DinhCode 当它们都没有悬停时，您的预期结果是什么？
@Alireza_Ahmadi 同：如果悬停 item(2) 并将 .thumbs 元素悬停在 item(2) 上。你能帮帮我吗？
@Alireza_Ahmadi 完美。感谢支持。