Javascript 在div列表中悬停/单击

我有一组

DIV

s，我需要给它们一个鼠标悬停的效果，当单击其中一个

DIV

s时，单击的DIV应该看起来像是在悬停（或任何效果），直到单击另一个DIV

  <div class="items" id="item1">AN ITEM</div>  
  <div class="items" id="item2">AN ITEM</div>    
  <div class="items" id="item3">AN ITEM</div> 
  <div class="items" id="item4">AN ITEM</div>       

尝试在单击时添加一个与hover样式相同的“活动”类。单击其他div时，您可以从以前单击的div中删除该类并将其添加到当前div。

尝试在单击时添加一个与hover样式相同的“活动”类。单击其他div时，您可以从以前单击的div中删除该类，并将其添加到当前div中。

尝试

var $items = $('.items').hover(function () {
    $(this).css("background-color", 'red');
}, function () {
    if (!$(this).hasClass('clicked')) {
        $(this).css("background-color", "transparent");
    }
}).click(function () {
    $items.filter('.clicked').css("background-color", "transparent").removeClass('clicked')
    $(this).addClass('clicked').css("background-color", 'red');
});

演示：

注意：我不使用类来设置单击状态的样式，因为它看起来像是来自选项的背景色，在这种情况下，很难指定类，否则单击的类也需要作为设置传递

一个更好的选择是

var settings = {
    color2: 'red',
    clicked: 'clicked'
}

var $items = $('.items').hover(function () {
    $(this).css("background-color", settings.color2);
}, function () {
    if (!$(this).hasClass('clicked')) {
        $(this).css("background-color", "transparent");
    }
}).click(function () {
    $items.filter('.' + settings.clicked).removeClass(settings.clicked)
    $(this).addClass(settings.clicked);
});

演示：

试试看

var $items = $('.items').hover(function () {
    $(this).css("background-color", 'red');
}, function () {
    if (!$(this).hasClass('clicked')) {
        $(this).css("background-color", "transparent");
    }
}).click(function () {
    $items.filter('.clicked').css("background-color", "transparent").removeClass('clicked')
    $(this).addClass('clicked').css("background-color", 'red');
});

演示：

注意：我不使用类来设置单击状态的样式，因为它看起来像是来自选项的背景色，在这种情况下，很难指定类，否则单击的类也需要作为设置传递

一个更好的选择是

var settings = {
    color2: 'red',
    clicked: 'clicked'
}

var $items = $('.items').hover(function () {
    $(this).css("background-color", settings.color2);
}, function () {
    if (!$(this).hasClass('clicked')) {
        $(this).css("background-color", "transparent");
    }
}).click(function () {
    $items.filter('.' + settings.clicked).removeClass(settings.clicked)
    $(this).addClass(settings.clicked);
});

---

演示：

我建议通过CSS添加悬停样式，而不是使用JS添加悬停样式。并将相同的样式添加到“活动”类中，并在单击时切换该类

大概是这样的：

CSS:

JS:

---

我建议通过CSS添加悬停样式，而不是使用JS添加悬停样式。并将相同的样式添加到“活动”类中，并在单击时切换该类

大概是这样的：

CSS:

JS:

$('.items').on('click', function() {
    $('.items').removeClass('active');
    $(this).addClass('active');
});