I want to change the color of element on Hover. However I want to disable hover effect while clicking on the element and set the clicked element red. Again if anyone clicks on the element , and I want to enable the Hover effect and apply the hover effect.

```
$('.divElement').on('mouseenter', function () {
    $(this).addClass('red');
});
$('.divElement').on('mouseleave', function () {
    $(this).removeClass('red');
});
$('.divElement').on('click', function () {
    $(this).removeClass('red');
    $(this).off('mouseenter mouseleave');
});

```

I Have tried this jQuery Code.

```
<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</div>
<div class="divElement">Element 4</div>

.divElement {
    color: blue;
}
.divElement.red {
    color: red;
}

```