CODEWITHSUNDEEP
javascriptjqueryhtml
Naveen Gamage
Naveen Gamage

Reputation: 1884

hover/click with list of DIVs

I've a set of DIVs and I need to give them a effect on mouse hover and when one of DIVs being clicked, the clicked DIV should look like it's being hovered (or whatever effect) until another DIV get clicked.

  <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>

I've tried to achieve this using jQuery but the effect goes away on mouse out.

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

Upvotes: 0

Views: 320

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Demo: Fiddle

Note: I din't use a class to style the clicked state because it looks like the background color is coming from an option, in that case it will be difficult to assign a class, else the clicked class also needs to be passed as a setting.

A better alternative will be to

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

Demo: Fiddle

Upvotes: 1

Travesty3
Travesty3

Reputation: 14469

Instead of adding the hover styles using JS, I would suggest adding them via CSS. And add the same styles to an "active" class and toggle that class on click.

Something like this:

CSS:

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

JS:

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

Upvotes: 3

bondjamesbond
bondjamesbond

Reputation: 41

Try adding an "active" class on click which has the same styles as hover. When some other div is clicked you remove that class from previously clicked div and add it to the current div.

Upvotes: 2

Related Questions