0

我有一组DIVs ，我需要给它们一个鼠标悬停效果，当单击其中一个DIVs 时，单击的 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>

我尝试使用 jQuery 来实现这一点，但鼠标移出效果会消失。

$('.items').hover(function () {
    var div = $(this).attr('id');
    if ($(div).css("background-color") == settings.color2) {
        return false;
    } else {
        $("#" + div).css("background-color", settings.color2);

    }
}, function () {
    var div = $(this).attr('id');
    if ($(div).css("background-color") == settings.color2) {
        return false;
    } else {
        $("#" + div).css("background-color", "transparent");
    }
}).click(function () {
    $(this)
        .closest('div')
        .css("background-color", "transparent");
    $(this).css("background-color", settings.color2);
});
4

3 回答 3

3

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

像这样的东西：

CSS：

.items:hover,
.items.active {
    background-color: /* whatever */;
}

JS：

$('.items').on('click', function() {
    $('.items').removeClass('active');
    $(this).addClass('active');
});
于 2013-10-30T02:27:23.230 回答
2

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

于 2013-10-30T02:24:38.553 回答
1

尝试

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

演示：小提琴

于 2013-10-30T02:26:44.820 回答