0

私は一連の を持ってDIVおり、それらにマウス ホバーの効果を与える必要があります。また、いずれかDIVの がクリックされると、クリックされた 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 に答える