How to Toggle Mouse Hover Event on Click?

Question

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

ellipsis · Answer 1 · 2019-01-29T03:35:38.737

Use mousedown event. Click responds after completing the click, mousedown works in between the click completion.

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</span>
<div class="divElement">Element 4</div>

Check the edits please. NO addition of extra css or classes. Works fine with the old ones. — ellipsis, Jan 29 '19 at 03:35

Sushil · Accepted Answer · 2019-01-29T03:12:41.070

What you have tried is just to disable (unbind) the Hover event. What You actually need is to toggle the hover event if it is clicked.

First of all, I would like to suggest you, to change <span> tag to <div> or add CSS for class .divElemenT{ display:block;} else inline-block element and block element may hover at once.

var hoverEvent= true;
$(".divElement").hover(
  function() {
    if(hoverEvent) $(this).toggleClass("red");
  }
);

$('.divElement').click(function() {
   $(this).toggleClass('selected');
   $('.divElement').not(this).removeClass('selected,red');// remove this line if you want multiple selector
   hoverEvent= !hoverEvent;
});

.divElement {
    color: blue;
    display:block;
}
.divElement.red {
    color: red;
}
.selected{
font-weight:bold;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</span>
<div class="divElement">Element 4</div>

Please leave a comment if it doesn't work.

@Ines I have added `selected` class and `.selected{ font-weight:bold;}` just to highlight the clicked element. — Sushil, Jan 29 '19 at 03:49

Nick Parsons · Answer 3 · 2019-01-29T02:59:37.143

I suggest you create a hover class which indicates that the class is hoverable. Then in your jQuery you can target elements with .hover class for your mouseenter and mouseleave leave events. This means instead of turning off the event listeners for your elements you can instead simply toggle the hover class for each element.

See working example below:

$(document).on('mouseenter', '.divElement.hover', function() {
  $(this).addClass('red');
});
$(document).on('mouseleave', '.divElement.hover', function() {
  $(this).removeClass('red');
});
$('.divElement').on('click', function() {
  $(this).toggleClass('hover');
});

.divElement {
  color: blue;
}

.divElement.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement hover">Element 1</div>
<div class="divElement hover">Element 2</div>
<div class="divElement hover">Element 3</div>
<div class="divElement hover">Element 4</div>

Note: You need to use $(document).on as you are dynamically changing the classes after the event biding initially occurs, allowing you to listen to events on elements dynamically added/changed.

@Ines when you click on an element it disables the hover and turns the clicked element red. Is this not what you were after? — Nick Parsons, Jan 29 '19 at 03:15

dtk142 · Answer 4 · 2019-01-29T09:07:07.037

Your approach by toggle class "red" is correct. I just change a bit

HTML

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

CSS

.divElement {
    color: blue;
}
.divElement.red:hover, .divElement.selected {
    color: red;
}

JQUERY

$('.divElement').on('click', function () {
$(this).toggleClass('red selected');
});

The idea is only make the hover event in class "red", then we toggleClass red for element when clicked.

ZERROUKI Ali · Answer 5 · 2019-01-29T03:34:12.537

0

try this

$('.divElement').click(function(){
 if($(this).hasClass("red")||$(this).hasClass("selected")){
     $('.divElement').toggleClass("red");
     $(this).toggleClass("selected");
    }
});

.red:hover,.selected{
      color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divElement red">Element 1</div>
    <div class="divElement red">Element 2</div>
    <span class="divElement red">Element 3</span>
    <div class="divElement red">Element 4</div>

edited Jan 29 '19 at 03:34

answered Jan 29 '19 at 02:58

ZERROUKI Ali

249
1
8

hover has not been disabled – Ines Jan 29 '19 at 03:15
i 'll fix it in one min – ZERROUKI Ali Jan 29 '19 at 03:19

How to Toggle Mouse Hover Event on Click?

5 Answers5