Mouseout and click

Question

When a user mouses over a div it should change to the color red, when they mouse out it should change back to transparent. When they click on the div, it should change to color red.

For some reason, the mouse out event listener is conflicting with the click event listener. Can someone help? When I click on the div, it doesn't change to red.

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  $(this).css('background-color', 'white');
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
});

Note, I have to apply a background image dynamically to each element, so using CSS classes to add the background image is out of the question (because I don't know it before hand).

Update your Complete CSS, JS, HTML to sort the Issue @Jasmin — Riot Zeast Captain, Apr 23 '16 at 14:30
I'm not sure how it should work. Are you willing to keep red color after clicking on the div even user fires mouseout event? Currently when user fires click event and then fires mouseout the div will be white instead of red. — Michał Szepielak, Apr 23 '16 at 15:05

Barry Michael Doyle · Answer 1 · 2016-04-23T14:34:15.443

1

You could set a boolean variable to confirm that the click has occurred and then only run the mouseout code if the variable is false like this:

var is_clicked = false;

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  if(!is_clicked) {
    $(this).css('background-color', 'white');
  }
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
  is_clicked = true;
});

Note: For multiple div elements user multiple is_clicked variables

edited Apr 23 '16 at 14:34

answered Apr 23 '16 at 14:30

Barry Michael Doyle

9,333
30
83
143

I have multiple div elements like that though – Chris Hansen Apr 23 '16 at 14:32
Ah right, well you could create an is_clicked variable for each div element then. – Barry Michael Doyle Apr 23 '16 at 14:33

timolawl · Answer 2 · 2016-04-23T14:56:50.543

You can always do a CSS implementation with :hover; just make sure to add a specifying class to each element you would like this effect on.

1. :hover and jQuery

var div$ = $('.redHover'); // name the class whatever you like

div$.on('click', function () {
  $(this).css('background-color', 'red');
});

div {
  display: inline-block;
}

.redHover {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.redHover:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>

2. :hover and vanilla JS

var els = document.querySelectorAll('.redHover');

for (var i = 0; i < els.length; ++i) { 
  els[i].addEventListener('click', function() {
    this.style.backgroundColor = 'red';
  });
}

div {
  display: inline-block;
}

.redHover {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.redHover:hover {
  background: red;
}

<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

Instead use mouseenter insead of mouseover see why.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 23 '16 at 14:31

Salathiel Genese

1,639
2
21
37

score 0 · Answer 4 · answered Apr 23 '16 at 14:40

The best thing you can go with would be the following notes:

To those elements with hover effect add a class like hoverable.
Hover effect is only applied to those elements having this class.

HTML:

<div class="hoverable"></div>

CSS:

.hoverable:hover{
    background-color: red
}

JavaScript:

div$.on('click', function () {
    $(this).css('background-color', 'red');
});

In this way, you can simply decide whether an element should be hover-able or not by adding or removing hoverable class. Also hover effect is applied in CSS level not JavaScript, which is more acceptable.

score 0 · Answer 5 · answered Apr 23 '16 at 16:11

As far as I understand you really want to change picture in the div, not just background color which is relatively easy. Try this:

<div class="hoverable">
<img src="myImg.jpg" />
</div>

//css
.hoverable img{visibility:hidden;}
.hoverable:hover img{visibility:visible;}
.clicked img{visibility:visible!important;}

//JS
$('.hoverable').click(function(){
    $(this).addClass('clicked');
});

Mouseout and click

5 Answers5