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