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: 
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.
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/)