JS 添加活动悬停项列表

Question

我有列表项

.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)。如果没有将任何项目悬停在最后悬停的活动项目上。

同于：

hover item(2): add active item(2) - Clear active item(1) && If don't hover any item or hover out .thumbs 元素坚持活动项目(2) .

我用户 js hover active 但不是 hover clear all active。

$(document).ready(function() {
  $(".thumbs .item").hover(
    function() {
        $(this).addClass('active');
    }, function() {
        $( this ).removeClass('active');
    }
);
});

Answer 1

不要忘记在添加之前 active class 删除所有 class 然后将其添加到当前元素：

$(".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>

JS 添加活动悬停项列表

JS add active hover item list

javascript

jquery-hover

mousehover