Question: I've a set of `DIV`s and I need to give them a effect on mouse hover and when one of `DIV`s 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);
});

```

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

```
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](http://jsfiddle.net/arunpjohny/hxR5Q/)

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](http://jsfiddle.net/arunpjohny/BkLF2/)